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

package/src/storybook/scaffold.tsx

@@ -7,14 +7,17 @@ function fn(value: unknown): value is (...args: never[]) => unknown {
 
 function pick(mod: Record<string, unknown>, name?: string) {
   if (name && fn(mod[name])) return mod[name]
+
   if (fn(mod.default)) return mod.default
 
   const preferred = Object.keys(mod)
     .filter((k) => k[0] && k[0] === k[0].toUpperCase())
     .find((k) => fn(mod[k]))
+
   if (preferred) return mod[preferred]
 
   const first = Object.keys(mod).find((k) => fn(mod[k]))
+
   if (first) return mod[first]
 
   return () => {

package/src/theme/color.ts

@@ -10,6 +10,7 @@ function hue(v: number) {
 
 export function hexToRgb(hex: HexColor): { r: number; g: number; b: number } {
   const h = hex.replace("#", "")
+
   const full =
     h.length === 3 || h.length === 4
       ? h
@@ -17,9 +18,11 @@ export function hexToRgb(hex: HexColor): { r: number; g: number; b: number } {
           .map((c) => c + c)
           .join("")
       : h
+
   const rgb = full.length === 8 ? full.slice(0, 6) : full
 
   const num = parseInt(rgb, 16)
+
   return {
     r: ((num >> 16) & 255) / 255,
     g: ((num >> 8) & 255) / 255,
@@ -31,18 +34,22 @@ export function rgbToHex(r: number, g: number, b: number): HexColor {
   const toHex = (v: number) => {
     const clamped = clamp(v, 0, 1)
     const int = Math.round(clamped * 255)
+
     return int.toString(16).padStart(2, "0")
   }
+
   return `#${toHex(r)}${toHex(g)}${toHex(b)}`
 }
 
 function linearToSrgb(c: number): number {
   if (c <= 0.0031308) return c * 12.92
+
   return 1.055 * Math.pow(c, 1 / 2.4) - 0.055
 }
 
 function srgbToLinear(c: number): number {
   if (c <= 0.04045) return c / 12.92
+
   return Math.pow((c + 0.055) / 1.055, 2.4)
 }
 
@@ -65,6 +72,7 @@ export function rgbToOklch(r: number, g: number, b: number): OklchColor {
 
   const C = Math.sqrt(a * a + bOk * bOk)
   let H = Math.atan2(bOk, a) * (180 / Math.PI)
+
   if (H < 0) H += 360
 
   return { l: L, c: C, h: H }
@@ -97,6 +105,7 @@ export function oklchToRgb(oklch: OklchColor): { r: number; g: number; b: number
 
 export function hexToOklch(hex: HexColor): OklchColor {
   const { r, g, b } = hexToRgb(hex)
+
   return rgbToOklch(r, g, b)
 }
 
@@ -108,15 +117,18 @@ export function fitOklch(oklch: OklchColor): OklchColor {
   }
 
   const rgb = oklchToRgb(base)
+
   if (rgb.r >= 0 && rgb.r <= 1 && rgb.g >= 0 && rgb.g <= 1 && rgb.b >= 0 && rgb.b <= 1) {
     return base
   }
 
   let c = base.c
+
   for (let i = 0; i < 24; i++) {
     c *= 0.9
     const next = { ...base, c }
     const out = oklchToRgb(next)
+
     if (out.r >= 0 && out.r <= 1 && out.g >= 0 && out.g <= 1 && out.b >= 0 && out.b <= 1) {
       return next
     }
@@ -127,6 +139,7 @@ export function fitOklch(oklch: OklchColor): OklchColor {
 
 export function oklchToHex(oklch: OklchColor): HexColor {
   const { r, g, b } = oklchToRgb(fitOklch(oklch))
+
   return rgbToHex(r, g, b)
 }
 
@@ -171,26 +184,31 @@ export function generateScale(seed: HexColor, isDark: boolean): HexColor[] {
 export function generateNeutralScale(seed: HexColor, isDark: boolean, ink?: HexColor): HexColor[] {
   if (ink) {
     const base = hexToOklch(seed)
+
     const lift = (tone: number) =>
       oklchToHex({
         l: base.l + (1 - base.l) * tone,
         c: base.c * Math.max(0, 1 - tone),
         h: base.h,
       })
+
     const sink = (tone: number) =>
       oklchToHex({
         l: base.l * (1 - tone),
         c: base.c * Math.max(0, 1 - tone * (isDark ? 0.12 : 0.3)),
         h: base.h,
       })
+
     const bg = isDark
       ? sink(clamp(0.19 + Math.max(0, base.l - 0.12) * 0.33 + base.c * 1.95, 0.17, 0.27))
       : base.l < 0.82
         ? lift(0.86)
         : lift(clamp(0.1 + base.c * 3.2 + Math.max(0, 0.95 - base.l) * 0.35, 0.1, 0.28))
+
     const steps = isDark
       ? [0, 0.018, 0.039, 0.064, 0.097, 0.143, 0.212, 0.31, 0.46, 0.649, 0.845, 0.984]
       : [0, 0.022, 0.042, 0.068, 0.102, 0.146, 0.208, 0.296, 0.432, 0.61, 0.81, 0.965]
+
     return steps.map((step) => mixColors(bg, ink, step))
   }
 
@@ -247,6 +265,7 @@ export function mixColors(color1: HexColor, color2: HexColor, amount: number): H
 
 export function shift(color: HexColor, value: { l?: number; c?: number; h?: number }): HexColor {
   const base = hexToOklch(color)
+
   return oklchToHex({
     l: base.l + (value.l ?? 0),
     c: base.c * (value.c ?? 1),
@@ -256,20 +275,25 @@ export function shift(color: HexColor, value: { l?: number; c?: number; h?: numb
 
 export function contrastRatio(foreground: HexColor, background: HexColor) {
   const linear = (c: number) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4)
+
   const luminance = (hex: HexColor) => {
     const { r, g, b } = hexToRgb(hex)
+
     return 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b)
   }
+
   const fg = luminance(foreground)
   const bg = luminance(background)
   const lighter = Math.max(fg, bg)
   const darker = Math.min(fg, bg)
+
   return (lighter + 0.05) / (darker + 0.05)
 }
 
 export function blend(color: HexColor, background: HexColor, alpha: number): HexColor {
   const fg = hexToRgb(color)
   const bg = hexToRgb(background)
+
   return rgbToHex(
     fg.r * alpha + bg.r * (1 - alpha),
     fg.g * alpha + bg.g * (1 - alpha),
@@ -279,6 +303,7 @@ export function blend(color: HexColor, background: HexColor, alpha: number): Hex
 
 export function lighten(color: HexColor, amount: number): HexColor {
   const oklch = hexToOklch(color)
+
   return oklchToHex({
     ...oklch,
     l: clamp(oklch.l + amount, 0, 1),
@@ -287,6 +312,7 @@ export function lighten(color: HexColor, amount: number): HexColor {
 
 export function darken(color: HexColor, amount: number): HexColor {
   const oklch = hexToOklch(color)
+
   return oklchToHex({
     ...oklch,
     l: clamp(oklch.l - amount, 0, 1),
@@ -295,5 +321,6 @@ export function darken(color: HexColor, amount: number): HexColor {
 
 export function withAlpha(color: HexColor, alpha: number): string {
   const { r, g, b } = hexToRgb(color)
+
   return `rgba(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)}, ${alpha})`
 }

package/src/theme/context.tsx

@@ -19,13 +19,17 @@ const STORAGE_KEYS = {
 } as const
 
 const THEME_STYLE_ID = "oc-theme"
+
 let files: Record<string, () => Promise<{ default: DesktopTheme }>> | undefined
+
 let ids: string[] | undefined
+
 let known: Set<string> | undefined
 
 function getFiles() {
   if (files) return files
   files = import.meta.glob<{ default: DesktopTheme }>("./themes/*.json")
+
   return files
 }
 
@@ -34,12 +38,14 @@ function themeIDs() {
   ids = Object.keys(getFiles())
     .map((path) => path.slice("./themes/".length, -".json".length))
     .sort()
+
   return ids
 }
 
 function knownThemes() {
   if (known) return known
   known = new Set(themeIDs())
+
   return known
 }
 
@@ -81,15 +87,18 @@ const names: Record<string, string> = {
   vesper: "Vesper",
   zenburn: "Zenburn",
 }
+
 const oc2Theme = oc2ThemeJson as DesktopTheme
 
 function resolveStoredTheme(id: string | null | undefined, registered?: Record<string, DesktopTheme>) {
   if (id === "oc-2" || (id && (knownThemes().has(id) || registered?.[id]))) return id
+
   return "oc-2"
 }
 
 function read(key: string) {
   if (typeof localStorage !== "object") return null
+
   try {
     return localStorage.getItem(key)
   } catch {
@@ -99,6 +108,7 @@ function read(key: string) {
 
 function write(key: string, value: string) {
   if (typeof localStorage !== "object") return
+
   try {
     localStorage.setItem(key, value)
   } catch {}
@@ -106,6 +116,7 @@ function write(key: string, value: string) {
 
 function drop(key: string) {
   if (typeof localStorage !== "object") return
+
   try {
     localStorage.removeItem(key)
   } catch {}
@@ -118,15 +129,18 @@ function clear() {
 
 function ensureThemeStyleElement(): HTMLStyleElement {
   const existing = document.getElementById(THEME_STYLE_ID) as HTMLStyleElement | null
+
   if (existing) return existing
   const element = document.createElement("style")
   element.id = THEME_STYLE_ID
   document.head.appendChild(element)
+
   return element
 }
 
 function getSystemMode(): "light" | "dark" {
   if (typeof window !== "object") return "light"
+
   return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
 }
 
@@ -156,11 +170,13 @@ function applyThemeCss(theme: DesktopTheme, themeId: string, mode: "light" | "da
 
   // Update theme-color meta tag to match light/dark mode
   const meta = document.querySelector('meta[name="theme-color"]')
+
   if (meta) meta.setAttribute("content", isDark ? "#080808" : "#fafafa")
 }
 
 function cacheThemeVariants(theme: DesktopTheme, themeId: string) {
   if (themeId === "oc-2") return
+
   for (const mode of ["light", "dark"] as const) {
     const isDark = mode === "dark"
     const variant = isDark ? theme.dark : theme.light
@@ -179,12 +195,15 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
   }) => {
     const rawTheme = read(STORAGE_KEYS.THEME_ID) ?? props.defaultTheme
     const themeId = resolveStoredTheme(rawTheme)
+
     if (rawTheme && rawTheme !== themeId) {
       write(STORAGE_KEYS.THEME_ID, themeId)
       clear()
     }
+
     const colorScheme = (read(STORAGE_KEYS.COLOR_SCHEME) as ColorScheme | null) ?? "system"
     const mode = colorScheme === "system" ? getSystemMode() : colorScheme
+
     const [store, setStore] = createStore({
       themes: {
         "oc-2": oc2Theme,
@@ -200,23 +219,31 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
 
     const load = (id: string) => {
       const next = id
+
       if (!next) return Promise.resolve(undefined)
       const hit = store.themes[next]
+
       if (hit) return Promise.resolve(hit)
       const pending = loads.get(next)
+
       if (pending) return pending
       const file = getFiles()[`./themes/${next}.json`]
+
       if (!file) return Promise.resolve(undefined)
+
       const task = file()
         .then((mod) => {
           const theme = mod.default
           setStore("themes", next, theme)
+
           return theme
         })
         .finally(() => {
           loads.delete(next)
         })
+
       loads.set(next, task)
+
       return task
     }
 
@@ -229,8 +256,11 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
       const extra = Object.keys(store.themes)
         .filter((id) => !knownThemes().has(id))
         .sort()
+
       const all = themeIDs()
+
       if (extra.length === 0) return all
+
       return [...all, ...extra]
     }
 
@@ -239,20 +269,26 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
     const onStorage = (e: StorageEvent) => {
       if (e.key === STORAGE_KEYS.THEME_ID && e.newValue) {
         const next = resolveStoredTheme(e.newValue, store.themes)
+
         if (next !== e.newValue) {
           write(STORAGE_KEYS.THEME_ID, next)
           clear()
         }
+
         setStore("themeId", next)
+
         if (next === "oc-2") {
           clear()
+
           return
         }
+
         void load(next).then((theme) => {
           if (!theme || store.themeId !== next) return
           cacheThemeVariants(theme, next)
         })
       }
+
       if (e.key === STORAGE_KEYS.COLOR_SCHEME && e.newValue) {
         setStore("colorScheme", e.newValue as ColorScheme)
         setStore("mode", e.newValue === "system" ? getSystemMode() : (e.newValue as "light" | "dark"))
@@ -263,20 +299,25 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
       makeEventListener(window, "storage", onStorage)
 
       const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
+
       const onMedia = () => {
         if (store.colorScheme !== "system") return
         setStore("mode", getSystemMode())
       }
+
       makeEventListener(mediaQuery, "change", onMedia)
 
       const rawTheme = read(STORAGE_KEYS.THEME_ID) ?? props.defaultTheme
       const savedTheme = resolveStoredTheme(rawTheme, store.themes)
       const savedScheme = (read(STORAGE_KEYS.COLOR_SCHEME) as ColorScheme | null) ?? "system"
+
       if (rawTheme && rawTheme !== savedTheme) {
         write(STORAGE_KEYS.THEME_ID, savedTheme)
         clear()
       }
+
       if (savedTheme !== store.themeId) setStore("themeId", savedTheme)
+
       if (savedScheme !== store.colorScheme) setStore("colorScheme", savedScheme)
       setStore("mode", savedScheme === "system" ? getSystemMode() : savedScheme)
       void load(savedTheme).then((theme) => {
@@ -287,26 +328,35 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
 
     createEffect(() => {
       const theme = store.themes[store.themeId]
+
       if (!theme) return
       applyTheme(theme, store.themeId, store.mode, store.colorScheme)
     })
 
     const setTheme = (id: string) => {
       const next = id
+
       if (!next) {
         console.warn(`Theme "${id}" not found`)
+
         return
       }
+
       if (next !== "oc-2" && !knownThemes().has(next) && !store.themes[next]) {
         console.warn(`Theme "${id}" not found`)
+
         return
       }
+
       setStore("themeId", next)
+
       if (next === "oc-2") {
         write(STORAGE_KEYS.THEME_ID, next)
         clear()
+
         return
       }
+
       void load(next).then((theme) => {
         if (!theme || store.themeId !== next) return
         cacheThemeVariants(theme, next)
@@ -333,16 +383,20 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
       registerTheme: (theme: DesktopTheme) => setStore("themes", theme.id, theme),
       previewTheme: (id: string) => {
         const next = id
+
         if (!next) return
+
         if (next !== "oc-2" && !knownThemes().has(next) && !store.themes[next]) return
         setStore("previewThemeId", next)
         void load(next).then((theme) => {
           if (!theme || store.previewThemeId !== next) return
+
           const mode = store.previewScheme
             ? store.previewScheme === "system"
               ? getSystemMode()
               : store.previewScheme
             : store.mode
+
           applyTheme(theme, next, mode, store.previewScheme ?? store.colorScheme)
         })
       },
@@ -352,7 +406,9 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
         const id = store.previewThemeId ?? store.themeId
         void load(id).then((theme) => {
           if (!theme) return
+
           if ((store.previewThemeId ?? store.themeId) !== id) return
+
           if (store.previewScheme !== scheme) return
           applyTheme(theme, id, mode, scheme)
         })
@@ -361,9 +417,11 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
         if (store.previewThemeId) {
           setTheme(store.previewThemeId)
         }
+
         if (store.previewScheme) {
           setColorScheme(store.previewScheme)
         }
+
         setStore("previewThemeId", null)
         setStore("previewScheme", null)
       },

package/src/theme/default-themes.ts

@@ -37,40 +37,75 @@ import vesperThemeJson from "./themes/vesper.json"
 import zenburnThemeJson from "./themes/zenburn.json"
 
 export const oc2Theme = oc2ThemeJson as DesktopTheme
+
 export const amoledTheme = amoledThemeJson as DesktopTheme
+
 export const auraTheme = auraThemeJson as DesktopTheme
+
 export const ayuTheme = ayuThemeJson as DesktopTheme
+
 export const carbonfoxTheme = carbonfoxThemeJson as DesktopTheme
+
 export const catppuccinTheme = catppuccinThemeJson as DesktopTheme
+
 export const catppuccinFrappeTheme = catppuccinFrappeThemeJson as DesktopTheme
+
 export const catppuccinMacchiatoTheme = catppuccinMacchiatoThemeJson as DesktopTheme
+
 export const cobalt2Theme = cobalt2ThemeJson as DesktopTheme
+
 export const cursorTheme = cursorThemeJson as DesktopTheme
+
 export const draculaTheme = draculaThemeJson as DesktopTheme
+
 export const everforestTheme = everforestThemeJson as DesktopTheme
+
 export const flexokiTheme = flexokiThemeJson as DesktopTheme
+
 export const githubTheme = githubThemeJson as DesktopTheme
+
 export const gruvboxTheme = gruvboxThemeJson as DesktopTheme
+
 export const kanagawaTheme = kanagawaThemeJson as DesktopTheme
+
 export const lucentOrngTheme = lucentOrngThemeJson as DesktopTheme
+
 export const materialTheme = materialThemeJson as DesktopTheme
+
 export const matrixTheme = matrixThemeJson as DesktopTheme
+
 export const mercuryTheme = mercuryThemeJson as DesktopTheme
+
 export const monokaiTheme = monokaiThemeJson as DesktopTheme
+
 export const nightowlTheme = nightowlThemeJson as DesktopTheme
+
 export const nordTheme = nordThemeJson as DesktopTheme
+
 export const oneDarkTheme = oneDarkThemeJson as DesktopTheme
+
 export const oneDarkProTheme = oneDarkProThemeJson as DesktopTheme
+
 export const orngTheme = orngThemeJson as DesktopTheme
+
 export const osakaJadeTheme = osakaJadeThemeJson as DesktopTheme
+
 export const palenightTheme = palenightThemeJson as DesktopTheme
+
 export const rosepineTheme = rosepineThemeJson as DesktopTheme
+
 export const shadesOfPurpleTheme = shadesOfPurpleThemeJson as DesktopTheme
+
 export const solarizedTheme = solarizedThemeJson as DesktopTheme
+
 export const synthwave84Theme = synthwave84ThemeJson as DesktopTheme
+
 export const tokyonightTheme = tokyonightThemeJson as DesktopTheme
+
 export const vercelTheme = vercelThemeJson as DesktopTheme
+
 export const vesperTheme = vesperThemeJson as DesktopTheme
+
 export const zenburnTheme = zenburnThemeJson as DesktopTheme
 
 export const DEFAULT_THEMES: Record<string, DesktopTheme> = {

package/src/theme/index.ts

@@ -32,8 +32,11 @@ export {
 } from "./color"
 
 export { resolveThemeVariant, resolveTheme, themeToCss } from "./resolve"
+
 export { resolveThemeVariantV2, resolveThemeV2, themeV2ToCss, generateV2Primitives } from "./v2/resolve"
+
 export { applyTheme, loadThemeFromUrl, getActiveTheme, removeTheme, setColorScheme } from "./loader"
+
 export { ThemeProvider, useTheme, type ColorScheme } from "./context"
 
 export {

package/src/theme/loader.ts

@@ -3,16 +3,20 @@ import { resolveThemeVariant, themeToCss } from "./resolve"
 import { resolveThemeVariantV2, themeV2ToCss } from "./v2/resolve"
 
 let activeTheme: DesktopTheme | null = null
+
 const THEME_STYLE_ID = "opencode-theme"
 
 function ensureLoaderStyleElement(): HTMLStyleElement {
   const existing = document.getElementById(THEME_STYLE_ID) as HTMLStyleElement | null
+
   if (existing) {
     return existing
   }
+
   const element = document.createElement("style")
   element.id = THEME_STYLE_ID
   document.head.appendChild(element)
+
   return element
 }
 
@@ -77,29 +81,36 @@ html[data-theme="${themeId}"] {
 
 export async function loadThemeFromUrl(url: string): Promise<DesktopTheme> {
   const response = await fetch(url)
+
   if (!response.ok) {
     throw new Error(`Failed to load theme from ${url}: ${response.statusText}`)
   }
+
   return response.json()
 }
 
 export function getActiveTheme(): DesktopTheme | null {
   const activeId = document.documentElement.getAttribute("data-theme")
+
   if (!activeId) {
     return null
   }
+
   if (activeTheme?.id === activeId) {
     return activeTheme
   }
+
   return null
 }
 
 export function removeTheme(): void {
   activeTheme = null
   const existingElement = document.getElementById(THEME_STYLE_ID)
+
   if (existingElement) {
     existingElement.remove()
   }
+
   document.documentElement.removeAttribute("data-theme")
 }