@opencode-ai/ui 0.0.0-beta-202606251302

package/src/components/toast.tsx

@@ -0,0 +1,185 @@
+import { Toast as Kobalte, toaster } from "@kobalte/core/toast"
+import type { ToastRootProps, ToastCloseButtonProps, ToastTitleProps, ToastDescriptionProps } from "@kobalte/core/toast"
+import type { ComponentProps, JSX } from "solid-js"
+import { Show } from "solid-js"
+import { Portal } from "solid-js/web"
+import { useI18n } from "../context/i18n"
+import { Icon, type IconProps } from "./icon"
+import { IconButton } from "./icon-button"
+
+export interface ToastRegionProps extends ComponentProps<typeof Kobalte.Region> {}
+
+function ToastRegion(props: ToastRegionProps) {
+  return (
+    <Portal>
+      <Kobalte.Region data-component="toast-region" {...props}>
+        <Kobalte.List data-slot="toast-list" />
+      </Kobalte.Region>
+    </Portal>
+  )
+}
+
+export interface ToastRootComponentProps extends ToastRootProps {
+  class?: string
+  classList?: ComponentProps<"li">["classList"]
+  children?: JSX.Element
+}
+
+function ToastRoot(props: ToastRootComponentProps) {
+  return (
+    <Kobalte
+      data-component="toast"
+      classList={{
+        ...props.classList,
+        [props.class ?? ""]: !!props.class,
+      }}
+      {...props}
+    />
+  )
+}
+
+function ToastIcon(props: { name: IconProps["name"] }) {
+  return (
+    <div data-slot="toast-icon">
+      <Icon name={props.name} />
+    </div>
+  )
+}
+
+function ToastContent(props: ComponentProps<"div">) {
+  return <div data-slot="toast-content" {...props} />
+}
+
+function ToastTitle(props: ToastTitleProps & ComponentProps<"div">) {
+  return <Kobalte.Title data-slot="toast-title" {...props} />
+}
+
+function ToastDescription(props: ToastDescriptionProps & ComponentProps<"div">) {
+  return <Kobalte.Description data-slot="toast-description" {...props} />
+}
+
+function ToastActions(props: ComponentProps<"div">) {
+  return <div data-slot="toast-actions" {...props} />
+}
+
+function ToastCloseButton(props: ToastCloseButtonProps & ComponentProps<"button">) {
+  const i18n = useI18n()
+  return (
+    <Kobalte.CloseButton
+      data-slot="toast-close-button"
+      as={IconButton}
+      icon="close"
+      variant="ghost"
+      aria-label={i18n.t("ui.common.dismiss")}
+      {...props}
+    />
+  )
+}
+
+function ToastProgressTrack(props: ComponentProps<typeof Kobalte.ProgressTrack>) {
+  return <Kobalte.ProgressTrack data-slot="toast-progress-track" {...props} />
+}
+
+function ToastProgressFill(props: ComponentProps<typeof Kobalte.ProgressFill>) {
+  return <Kobalte.ProgressFill data-slot="toast-progress-fill" {...props} />
+}
+
+export const Toast = Object.assign(ToastRoot, {
+  Region: ToastRegion,
+  Icon: ToastIcon,
+  Content: ToastContent,
+  Title: ToastTitle,
+  Description: ToastDescription,
+  Actions: ToastActions,
+  CloseButton: ToastCloseButton,
+  ProgressTrack: ToastProgressTrack,
+  ProgressFill: ToastProgressFill,
+})
+
+export { toaster }
+
+export type ToastVariant = "default" | "success" | "error" | "loading"
+
+export interface ToastAction {
+  label: string
+  onClick: "dismiss" | (() => void)
+}
+
+export interface ToastOptions {
+  title?: string
+  description?: string
+  icon?: IconProps["name"]
+  variant?: ToastVariant
+  duration?: number
+  persistent?: boolean
+  actions?: ToastAction[]
+}
+
+export function showToast(options: ToastOptions | string) {
+  const opts = typeof options === "string" ? { description: options } : options
+  return toaster.show((props) => (
+    <Toast
+      toastId={props.toastId}
+      duration={opts.duration}
+      persistent={opts.persistent}
+      data-variant={opts.variant ?? "default"}
+    >
+      <Show when={opts.icon}>
+        <Toast.Icon name={opts.icon!} />
+      </Show>
+      <Toast.Content>
+        <Show when={opts.title}>
+          <Toast.Title>{opts.title}</Toast.Title>
+        </Show>
+        <Show when={opts.description}>
+          <Toast.Description>{opts.description}</Toast.Description>
+        </Show>
+        <Show when={opts.actions?.length}>
+          <Toast.Actions>
+            {opts.actions!.map((action) => (
+              <button
+                data-slot="toast-action"
+                onClick={() => {
+                  if (typeof action.onClick === "function") {
+                    action.onClick()
+                  }
+                  toaster.dismiss(props.toastId)
+                }}
+              >
+                {action.label}
+              </button>
+            ))}
+          </Toast.Actions>
+        </Show>
+      </Toast.Content>
+      <Toast.CloseButton />
+    </Toast>
+  ))
+}
+
+export interface ToastPromiseOptions<T, U = unknown> {
+  loading?: JSX.Element
+  success?: (data: T) => JSX.Element
+  error?: (error: U) => JSX.Element
+}
+
+export function showPromiseToast<T, U = unknown>(
+  promise: Promise<T> | (() => Promise<T>),
+  options: ToastPromiseOptions<T, U>,
+) {
+  return toaster.promise(promise, (props) => (
+    <Toast
+      toastId={props.toastId}
+      data-variant={props.state === "pending" ? "loading" : props.state === "fulfilled" ? "success" : "error"}
+    >
+      <Toast.Content>
+        <Toast.Description>
+          {props.state === "pending" && options.loading}
+          {props.state === "fulfilled" && options.success?.(props.data!)}
+          {props.state === "rejected" && options.error?.(props.error)}
+        </Toast.Description>
+      </Toast.Content>
+      <Toast.CloseButton />
+    </Toast>
+  ))
+}

package/src/components/tooltip.css

@@ -0,0 +1,74 @@
+[data-component="tooltip-trigger"] {
+  display: flex;
+}
+
+[data-slot="tooltip-keybind"] {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+[data-slot="tooltip-keybind-key"] {
+  color: var(--text-invert-base);
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-large);
+}
+
+[data-component="tooltip"] {
+  z-index: 1000;
+  max-width: 320px;
+  border-radius: var(--radius-sm);
+  background-color: var(--surface-float-base);
+  color: var(--text-invert-strong);
+  background: var(--surface-float-base);
+  padding: 2px 8px;
+  border: 1px solid var(--border-weak-base, rgba(0, 0, 0, 0.07));
+
+  box-shadow: var(--shadow-md);
+  pointer-events: none !important;
+  /* transition: all 150ms ease-out; */
+  /* transform: translate3d(0, 0, 0); */
+  /* transform-origin: var(--kb-tooltip-content-transform-origin); */
+
+  /* text-12-medium */
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-small);
+  font-style: normal;
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-large); /* 166.667% */
+  letter-spacing: var(--letter-spacing-normal);
+
+  &[data-expanded] {
+    opacity: 1;
+    /* transform: translate3d(0, 0, 0); */
+  }
+
+  &[data-closed]:not([data-force-open="true"]) {
+    opacity: 0;
+  }
+
+  /* &[data-placement="top"] { */
+  /*   &[data-closed] { */
+  /*     transform: translate3d(0, 4px, 0); */
+  /*   } */
+  /* } */
+  /**/
+  /* &[data-placement="bottom"] { */
+  /*   &[data-closed] { */
+  /*     transform: translate3d(0, -4px, 0); */
+  /*   } */
+  /* } */
+  /**/
+  /* &[data-placement="left"] { */
+  /*   &[data-closed] { */
+  /*     transform: translate3d(4px, 0, 0); */
+  /*   } */
+  /* } */
+  /**/
+  /* &[data-placement="right"] { */
+  /*   &[data-closed] { */
+  /*     transform: translate3d(-4px, 0, 0); */
+  /*   } */
+  /* } */
+}

package/src/components/tooltip.tsx

@@ -0,0 +1,161 @@
+import { Tooltip as KobalteTooltip } from "@kobalte/core/tooltip"
+import { createEffect, Match, onCleanup, splitProps, Switch, type JSX } from "solid-js"
+import type { ComponentProps } from "solid-js"
+import { createStore } from "solid-js/store"
+
+export interface TooltipProps extends ComponentProps<typeof KobalteTooltip> {
+  value: JSX.Element
+  class?: string
+  contentClass?: string
+  contentStyle?: JSX.CSSProperties
+  inactive?: boolean
+  forceOpen?: boolean
+}
+
+export interface TooltipKeybindProps extends Omit<TooltipProps, "value"> {
+  title: string
+  keybind: string
+}
+
+export function TooltipKeybind(props: TooltipKeybindProps) {
+  const [local, others] = splitProps(props, ["title", "keybind"])
+  return (
+    <Tooltip
+      {...others}
+      value={
+        <div data-slot="tooltip-keybind">
+          <span>{local.title}</span>
+          <span data-slot="tooltip-keybind-key">{local.keybind}</span>
+        </div>
+      }
+    />
+  )
+}
+
+export function Tooltip(props: TooltipProps) {
+  let ref: HTMLDivElement | undefined
+  const [state, setState] = createStore({
+    open: false,
+    block: false,
+    expand: false,
+  })
+  const [local, others] = splitProps(props, [
+    "children",
+    "class",
+    "contentClass",
+    "contentStyle",
+    "inactive",
+    "forceOpen",
+    "ignoreSafeArea",
+    "value",
+  ])
+
+  const close = () => setState("open", false)
+
+  const inside = () => {
+    const active = document.activeElement
+    if (!ref || !active) return false
+    return ref.contains(active)
+  }
+
+  const drop = (expand = state.expand) => {
+    if (expand) return
+    if (ref?.matches(":hover")) return
+    if (inside()) return
+    setState("block", false)
+  }
+
+  const sync = () => {
+    const expand = !!ref?.querySelector('[aria-expanded="true"], [data-expanded]')
+    setState("expand", expand)
+    if (expand) {
+      setState("block", true)
+      close()
+      return
+    }
+    drop(expand)
+  }
+
+  const arm = () => {
+    setState("block", true)
+    close()
+  }
+
+  const leave = () => {
+    if (!inside()) close()
+    drop()
+  }
+
+  createEffect(() => {
+    if (!ref) return
+    sync()
+    const obs = new MutationObserver(sync)
+    obs.observe(ref, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: ["aria-expanded", "data-expanded"],
+    })
+    onCleanup(() => obs.disconnect())
+  })
+
+  let justClickedTrigger = false
+
+  return (
+    <Switch>
+      <Match when={local.inactive}>{local.children}</Match>
+      <Match when={true}>
+        <KobalteTooltip
+          gutter={4}
+          {...others}
+          closeDelay={0}
+          ignoreSafeArea={local.ignoreSafeArea ?? true}
+          open={local.forceOpen || state.open}
+          onOpenChange={(open) => {
+            if (local.forceOpen) return
+            if (state.block && open) return
+            if (justClickedTrigger) {
+              justClickedTrigger = false
+              return
+            }
+            setState("open", open)
+          }}
+        >
+          <KobalteTooltip.Trigger
+            ref={ref}
+            as={"div"}
+            data-component="tooltip-trigger"
+            class={local.class}
+            onPointerDownCapture={arm}
+            onKeyDownCapture={(event: KeyboardEvent) => {
+              if (event.key !== "Enter" && event.key !== " ") return
+              arm()
+            }}
+            onPointerLeave={leave}
+            onFocusOut={() => requestAnimationFrame(() => drop())}
+          >
+            {local.children}
+          </KobalteTooltip.Trigger>
+          <KobalteTooltip.Portal>
+            <KobalteTooltip.Content
+              data-component="tooltip"
+              data-placement={props.placement}
+              data-force-open={local.forceOpen}
+              class={local.contentClass}
+              style={local.contentStyle}
+              onPointerDownOutside={(e) => {
+                if (ref === e.target || (e.target instanceof Node && ref?.contains(e.target))) {
+                  justClickedTrigger = true
+                }
+                e.preventDefault()
+              }}
+            >
+              {local.value}
+              {/* <KobalteTooltip.Arrow data-slot="tooltip-arrow" /> */}
+            </KobalteTooltip.Content>
+          </KobalteTooltip.Portal>
+        </KobalteTooltip>
+      </Match>
+    </Switch>
+  )
+}

package/src/components/typewriter.css

@@ -0,0 +1,14 @@
+@keyframes blink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+  51%,
+  100% {
+    opacity: 0;
+  }
+}
+
+.blinking-cursor {
+  animation: blink 1s step-end infinite;
+}

package/src/components/typewriter.tsx

@@ -0,0 +1,55 @@
+import { createEffect, onCleanup, Show, type ValidComponent } from "solid-js"
+import { createStore } from "solid-js/store"
+import { Dynamic } from "solid-js/web"
+
+export const Typewriter = <T extends ValidComponent = "p">(props: { text?: string; class?: string; as?: T }) => {
+  const [store, setStore] = createStore({
+    typing: false,
+    displayed: "",
+    cursor: true,
+  })
+
+  createEffect(() => {
+    const text = props.text
+    if (!text) return
+
+    let i = 0
+    const timeouts: ReturnType<typeof setTimeout>[] = []
+    setStore("typing", true)
+    setStore("displayed", "")
+    setStore("cursor", true)
+
+    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
+    }
+
+    const type = () => {
+      if (i < text.length) {
+        setStore("displayed", text.slice(0, i + 1))
+        i++
+        timeouts.push(setTimeout(type, getTypingDelay()))
+      } else {
+        setStore("typing", false)
+        timeouts.push(setTimeout(() => setStore("cursor", false), 2000))
+      }
+    }
+
+    timeouts.push(setTimeout(type, 200))
+
+    onCleanup(() => {
+      for (const timeout of timeouts) clearTimeout(timeout)
+    })
+  })
+
+  return (
+    <Dynamic component={props.as || "p"} class={props.class}>
+      {store.displayed}
+      <Show when={store.cursor}>
+        <span classList={{ "blinking-cursor": !store.typing }}>│</span>
+      </Show>
+    </Dynamic>
+  )
+}

package/src/context/dialog.tsx

@@ -0,0 +1,197 @@
+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
+
+    const node = runWithOwner(owner, () =>
+      createRoot((d: () => void) => {
+        dispose = d
+        const [closing, setClosingSignal] = createSignal(false)
+        setClosing = setClosingSignal
+        return (
+          <Kobalte
+            modal
+            open={!closing()}
+            onOpenChange={(open: boolean) => {
+              if (open) 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