@opencode/ui 0.0.0-reserved → 2.0.1

package/src/context/dialog.tsx

@@ -0,0 +1,198 @@
+import {
+  createContext,
+  createEffect,
+  createRoot,
+  createSignal,
+  getOwner,
+  onCleanup,
+  type Owner,
+  type ParentProps,
+  runWithOwner,
+  useContext,
+  type JSX,
+  startTransition,
+  For,
+} from "solid-js"
+import { Dialog as Kobalte } from "@kobalte/core/dialog"
+import { makeEventListener } from "@solid-primitives/event-listener"
+
+type DialogElement = () => JSX.Element
+
+type Active = {
+  id: string
+  node: JSX.Element
+  dispose: () => void
+  owner: Owner
+  onClose?: () => void
+  setClosing: (closing: boolean) => void
+}
+
+const Context = createContext<ReturnType<typeof init>>()
+
+function init() {
+  const [stack, setStack] = createSignal<Active[]>([])
+  const timer = { current: undefined as ReturnType<typeof setTimeout> | undefined }
+  const lock = { value: false }
+
+  onCleanup(() => {
+    if (timer.current === undefined) return
+    clearTimeout(timer.current)
+    timer.current = undefined
+  })
+
+  const close = (id?: string) => {
+    const items = stack()
+    const current = id ? items.find((item) => item.id === id) : items.at(-1)
+    if (!current || lock.value) return
+    lock.value = true
+    current.onClose?.()
+    current.setClosing(true)
+
+    const closed = current.id
+    if (timer.current !== undefined) {
+      clearTimeout(timer.current)
+      timer.current = undefined
+    }
+
+    timer.current = setTimeout(() => {
+      timer.current = undefined
+      current.dispose()
+      setStack((items) => items.filter((item) => item.id !== closed))
+      lock.value = false
+    }, 100)
+  }
+
+  createEffect(() => {
+    if (stack().length === 0) return
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return
+      close()
+      event.preventDefault()
+      event.stopPropagation()
+    }
+
+    makeEventListener(window, "keydown", onKeyDown, { capture: true })
+  })
+
+  const mount = (element: DialogElement, owner: Owner, onClose: (() => void) | undefined, layer: number) => {
+    const id = Math.random().toString(36).slice(2)
+    const zIndex = 50 + layer * 10
+    let dispose: (() => void) | undefined
+    let setClosing: ((closing: boolean) => void) | undefined
+
+    // Stacked dialogs render as sibling portals, so only the top layer may own the focus trap.
+    const node = runWithOwner(owner, () =>
+      createRoot((d: () => void) => {
+        dispose = d
+        const [closing, setClosingSignal] = createSignal(false)
+        setClosing = setClosingSignal
+        return (
+          <Kobalte
+            modal={stack().at(-1)?.id === id}
+            open={!closing()}
+            onOpenChange={(open: boolean) => {
+              if (open || stack().at(-1)?.id !== id) return
+              close(id)
+            }}
+          >
+            <Kobalte.Portal>
+              <Kobalte.Overlay
+                data-component="dialog-overlay"
+                style={{ "z-index": String(zIndex) }}
+                onClick={() => close(id)}
+              />
+              <div
+                data-dialog-layer={layer}
+                style={{
+                  position: "fixed",
+                  inset: "0",
+                  "z-index": String(zIndex),
+                  display: "flex",
+                  "align-items": "center",
+                  "justify-content": "center",
+                  "pointer-events": "none",
+                }}
+              >
+                {element()}
+              </div>
+            </Kobalte.Portal>
+          </Kobalte>
+        )
+      }),
+    )
+
+    if (!dispose || !setClosing) return
+
+    const active: Active = { id, node, dispose, owner, onClose, setClosing }
+    setStack((items) => [...items, active])
+  }
+
+  const push = (element: DialogElement, owner: Owner, onClose?: () => void) => {
+    if (timer.current !== undefined) {
+      clearTimeout(timer.current)
+      timer.current = undefined
+    }
+    lock.value = false
+    mount(element, owner, onClose, stack().length)
+  }
+
+  const show = (element: DialogElement, owner: Owner, onClose?: () => void) => {
+    for (const item of stack()) item.dispose()
+    setStack([])
+    if (timer.current !== undefined) {
+      clearTimeout(timer.current)
+      timer.current = undefined
+    }
+    lock.value = false
+    mount(element, owner, onClose, 0)
+  }
+
+  return {
+    stack,
+    close,
+    show,
+    push,
+  }
+}
+
+export function DialogProvider(props: ParentProps) {
+  const ctx = init()
+  return (
+    <Context.Provider value={ctx}>
+      {props.children}
+      <div data-component="dialog-stack">
+        <For each={ctx.stack()}>{(item) => item.node}</For>
+      </div>
+    </Context.Provider>
+  )
+}
+
+export function useDialog() {
+  const ctx = useContext(Context)
+  const owner = getOwner()
+
+  if (!owner) {
+    throw new Error("useDialog must be used within a DialogProvider")
+  }
+  if (!ctx) {
+    throw new Error("useDialog must be used within a DialogProvider")
+  }
+
+  return {
+    get active() {
+      return ctx.stack().at(-1)
+    },
+    show(element: DialogElement, onClose?: () => void) {
+      const base = ctx.stack().at(-1)?.owner ?? owner
+      return startTransition(() => ctx.show(element, base, onClose))
+    },
+    push(element: DialogElement, onClose?: () => void) {
+      const base = ctx.stack().at(-1)?.owner ?? owner
+      return startTransition(() => ctx.push(element, base, onClose))
+    },
+    close() {
+      ctx.close()
+    },
+  }
+}

package/src/context/file.tsx

@@ -0,0 +1,10 @@
+import type { ValidComponent } from "solid-js"
+import { createSimpleContext } from "./helper"
+
+const ctx = createSimpleContext<ValidComponent, { component: ValidComponent }>({
+  name: "FileComponent",
+  init: (props) => props.component,
+})
+
+export const FileComponentProvider = ctx.provider
+export const useFileComponent = ctx.use

package/src/context/helper.tsx

@@ -0,0 +1,38 @@
+import { createContext, createMemo, Show, useContext, type ParentProps, type Accessor } from "solid-js"
+
+export function createSimpleContext<T, Props extends Record<string, any>>(
+  input: {
+    name: string
+    init: ((input: Props) => T) | (() => T)
+  } & (T extends { ready: unknown } ? { gate: boolean } : { gate?: boolean }),
+) {
+  const ctx = createContext<T>()
+
+  return {
+    provider: (props: ParentProps<Props>) => {
+      const init = input.init(props)
+      const gate = input.gate ?? true
+
+      if (!gate) {
+        return <ctx.Provider value={init}>{props.children}</ctx.Provider>
+      }
+
+      // Access init.ready inside the memo to make it reactive for getter properties
+      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>
+        </Show>
+      )
+    },
+    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

@@ -0,0 +1,77 @@
+import { createContext, useContext, type Accessor, type ParentProps } from "solid-js"
+import { I18nProvider } from "@kobalte/core/i18n"
+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 UiI18nParams = Record<string, string | number | boolean>
+export type UiTranslate = <Value extends string>(key: UiTranslationKey<Value>, params?: UiI18nParams) => string
+
+export type UiI18n = {
+  locale: Accessor<string>
+  layoutLocale?: Accessor<string>
+  t: UiTranslate
+  plural: (key: UiI18nPluralKey, count: number, params?: UiI18nParams) => string
+  pluralForm?: (key: UiI18nPluralKey, category: UiPluralCategory, 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) {
+  if (!params) return text
+  return text.replace(/{{\s*([^}]+?)\s*}}/g, (_, rawKey) => {
+    const key = String(rawKey)
+    const value = params[key]
+    return value === undefined ? "" : String(value)
+  })
+}
+
+const fallback: UiI18n = {
+  locale: () => "en",
+  t: (key, params) => {
+    const value = en[key as UiI18nKey] ?? String(key)
+    return resolveTemplate(value, params)
+  },
+  plural: (key, count, params) =>
+    fallback.pluralForm!(key, pluralCategory(fallback.locale(), count), { ...params, count }),
+  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 Context = createContext<UiI18n>(fallback)
+
+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/index.ts

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

package/src/context/marked-base.tsx

@@ -0,0 +1,55 @@
+import { Marked } from "marked"
+
+export function createMarkdownBase() {
+  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>`
+      },
+    },
+  })
+}
+
+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 (
+    /^[\p{L}\p{N} \t\r\n,.;:!?'"’“”()\-–—…$%]+$/u.test(text) &&
+    !/(?:^|[\r\n])(?:[ \t]|\d|[-])| {2}(?:\r\n?|\n)|www\./.test(text)
+  ) {
+    return text
+      .replace(/\r\n?/g, "\n")
+      .replace(/^\n+|\n+$/g, "")
+      .split(/\n{2,}/)
+      .filter(Boolean)
+      .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 (
+    !/[<|]/.test(paragraphs) &&
+    !/^(?:[ \t>\d\[\-=]|#{1,6}(?:[ \t]|$)|[`~]{3}|[+*](?:[ \t]|$)|(?:[*_][ \t]*){3,}$)/m.test(paragraphs)
+  ) {
+    return paragraphs
+      .replace(/^\n+|\n+$/g, "")
+      .split(/\n{2,}/)
+      .filter(Boolean)
+      .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

@@ -0,0 +1,58 @@
+import katex from "katex"
+import type { MarkedExtension, Tokens } from "marked"
+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 }))
+}
+
+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))
+}