@opencode-ai/ui 0.0.0-next-17078 → 0.0.0-next-17080

package/src/v2/components/toast-v2.tsx

@@ -1,40 +1,81 @@
-import { Toast as Kobalte, toaster } from "@kobalte/core/toast"
-import type { ToastRootProps, ToastCloseButtonProps, ToastTitleProps, ToastDescriptionProps } from "@kobalte/core/toast"
+import { Toaster, toast, type ToasterProps } from "solid-sonner"
+import { isRTL } from "@kobalte/core/i18n"
 import type { ComponentProps, JSX } from "solid-js"
-import { Show, children } from "solid-js"
+import { createContext, onCleanup, onMount, splitProps, useContext } from "solid-js"
 import { Portal } from "solid-js/web"
-import { ButtonV2 } from "./button-v2"
+import { useI18n } from "../../context/i18n"
+import "./button-v2.css"
 import "./toast-v2.css"
 
-export interface ToastV2RegionProps extends ComponentProps<typeof Kobalte.Region> {}
+export interface ToastV2RegionProps extends ToasterProps {}
 
 function ToastV2Region(props: ToastV2RegionProps) {
+  const i18n = useI18n()
+  const [local, rest] = splitProps(props, ["class", "className", "style", "toastOptions", "swipeDirections"])
+  onMount(() => {
+    const sync = () => {
+      document.querySelectorAll<HTMLElement>(".toast-v2-region .toast-v2").forEach((element) => {
+        const hidden = element.dataset.visible === "false"
+        element.inert = hidden
+        element.tabIndex = hidden ? -1 : 0
+      })
+    }
+    let connected = false
+    const connect = () => {
+      const regions = document.querySelectorAll(".toast-v2-region")
+      if (!regions.length) return
+      observer.disconnect()
+      regions.forEach((region) => {
+        observer.observe(region, {
+          subtree: true,
+          childList: true,
+          attributes: true,
+          attributeFilter: ["data-visible"],
+        })
+      })
+      connected = true
+      sync()
+    }
+    const observer = new MutationObserver(() => {
+      if (!connected) connect()
+      else sync()
+    })
+    observer.observe(document.body, { subtree: true, childList: true })
+    queueMicrotask(connect)
+    onCleanup(() => observer.disconnect())
+  })
   return (
     <Portal>
-      <Kobalte.Region data-component="toast-v2-region" {...props}>
-        <Kobalte.List data-slot="toast-v2-list" />
-      </Kobalte.Region>
+      <Toaster
+        position={isRTL(i18n.locale()) ? "bottom-left" : "bottom-right"}
+        offset={isRTL(i18n.locale()) ? { left: 32, bottom: 48 } : { right: 32, bottom: 48 }}
+        mobileOffset={16}
+        gap={12}
+        duration={5000}
+        swipeDirections={["bottom"]}
+        className={["toast-v2-region", local.className, local.class].filter(Boolean).join(" ")}
+        style={{ "--width": "320px", ...local.style } as JSX.CSSProperties}
+        toastOptions={{
+          ...local.toastOptions,
+          unstyled: true,
+          closeButton: true,
+          closeButtonAriaLabel: local.toastOptions?.closeButtonAriaLabel ?? i18n.t("ui.common.dismiss"),
+        }}
+        {...rest}
+      />
     </Portal>
   )
 }
 
-export interface ToastV2RootComponentProps extends ToastRootProps {
-  class?: string
-  classList?: ComponentProps<"li">["classList"]
+const ToastV2Context = createContext<number>()
+
+export interface ToastV2RootComponentProps {
+  toastId: number
   children?: JSX.Element
 }
 
 function ToastV2Root(props: ToastV2RootComponentProps) {
-  return (
-    <Kobalte
-      data-component="toast-v2"
-      classList={{
-        ...props.classList,
-        [props.class ?? ""]: !!props.class,
-      }}
-      {...props}
-    />
-  )
+  return <ToastV2Context.Provider value={props.toastId}>{props.children}</ToastV2Context.Provider>
 }
 
 function ToastV2Icon(props: ComponentProps<"div">) {
@@ -45,26 +86,44 @@ function ToastV2Content(props: ComponentProps<"div">) {
   return <div data-slot="toast-v2-content" {...props} />
 }
 
-function ToastV2Title(props: ToastTitleProps & ComponentProps<"div">) {
-  return <Kobalte.Title data-slot="toast-v2-title" {...props} />
+function ToastV2Title(props: ComponentProps<"div">) {
+  return <div data-slot="toast-v2-title" {...props} />
 }
 
-function ToastV2Description(props: ToastDescriptionProps & ComponentProps<"div">) {
-  return <Kobalte.Description data-slot="toast-v2-description" {...props} />
+function ToastV2Description(props: ComponentProps<"div">) {
+  return <div data-slot="toast-v2-description" {...props} />
 }
 
 function ToastV2Actions(props: ComponentProps<"div">) {
   return <div data-slot="toast-v2-actions" {...props} />
 }
 
-function ToastV2CloseButton(props: ToastCloseButtonProps & ComponentProps<"button">) {
+function ToastV2CloseButton(props: ComponentProps<"button">) {
+  const i18n = useI18n()
+  const toastId = useContext(ToastV2Context)
+  const [local, rest] = splitProps(props, ["children", "onClick"])
   return (
-    <Kobalte.CloseButton data-slot="toast-v2-close-button" aria-label="Dismiss" {...props}>
-      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-        <path d="M4.25 11.75L11.75 4.25" stroke="currentColor" />
-        <path d="M11.75 11.75L4.25 4.25" stroke="currentColor" />
-      </svg>
-    </Kobalte.CloseButton>
+    <button
+      type="button"
+      data-slot="toast-v2-close-button"
+      aria-label={i18n.t("ui.common.dismiss")}
+      {...rest}
+      onClick={(event) => {
+        if (typeof local.onClick === "function") local.onClick(event)
+        if (!event.defaultPrevented && toastId !== undefined) toasterV2.dismiss(toastId)
+      }}
+    >
+      {local.children ?? <CloseIcon />}
+    </button>
+  )
+}
+
+function CloseIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      <path d="M4.25 11.75L11.75 4.25" stroke="currentColor" />
+      <path d="M11.75 11.75L4.25 4.25" stroke="currentColor" />
+    </svg>
   )
 }
 
@@ -78,7 +137,29 @@ export const ToastV2 = Object.assign(ToastV2Root, {
   CloseButton: ToastV2CloseButton,
 })
 
-export { toaster as toasterV2 }
+let toastV2Id = 0
+
+export const toasterV2 = {
+  show(render: (props: { toastId: number }) => JSX.Element, options?: { duration?: number; persistent?: boolean }) {
+    const toastId = --toastV2Id
+    toast.custom((id) => render({ toastId: Number(id) }), {
+      id: toastId,
+      className: "toast-v2",
+      duration: options?.persistent ? Number.POSITIVE_INFINITY : options?.duration,
+      unstyled: true,
+    })
+    return toastId
+  },
+  dismiss(toastId?: number) {
+    if (toastId === undefined) {
+      activeToastV2ByKey.clear()
+      activeToastV2ById.clear()
+    } else {
+      releaseToastV2(activeToastV2ById.get(toastId))
+    }
+    return toast.dismiss(toastId)
+  },
+}
 
 export interface ToastV2Action {
   label: string
@@ -90,53 +171,107 @@ export interface ToastV2Options {
   title?: string
   description?: string
   icon?: JSX.Element
+  variant?: "default" | "success" | "error" | "loading"
   duration?: number
   persistent?: boolean
   actions?: ToastV2Action[]
 }
 
+interface ActiveToastV2 {
+  id: number
+  key: string
+  options: ToastV2Options
+  actions?: JSX.Element
+}
+
+const activeToastV2ByKey = new Map<string, ActiveToastV2>()
+const activeToastV2ById = new Map<number, ActiveToastV2>()
+
 export function showToastV2(options: ToastV2Options | string) {
-  const opts = typeof options === "string" ? { description: options } : options
-  return toaster.show((props) => {
-    const resolvedIcon = children(() => opts.icon)
-    return (
-      <ToastV2 toastId={props.toastId} duration={opts.duration} persistent={opts.persistent}>
-        <div data-slot="toast-v2-header">
-          <Show when={resolvedIcon()}>
-            <ToastV2.Icon>{resolvedIcon()}</ToastV2.Icon>
-          </Show>
-          <ToastV2.Content>
-            <Show when={opts.title}>
-              <ToastV2.Title>{opts.title}</ToastV2.Title>
-            </Show>
-            <Show when={opts.description}>
-              <ToastV2.Description>{opts.description}</ToastV2.Description>
-            </Show>
-          </ToastV2.Content>
-          <ToastV2.CloseButton />
-        </div>
-        <Show when={opts.actions?.length}>
-          <ToastV2.Actions>
-            {opts.actions!.map((action) => (
-              <ButtonV2
-                variant={action.variant === "secondary" ? "ghost" : "neutral"}
-                size="small"
-                data-action-variant={action.variant ?? "primary"}
-                onClick={() => {
-                  if (typeof action.onClick === "function") {
-                    action.onClick()
-                  }
-                  toaster.dismiss(props.toastId)
-                }}
-              >
-                {action.label}
-              </ButtonV2>
-            ))}
-          </ToastV2.Actions>
-        </Show>
-      </ToastV2>
-    )
+  const opts: ToastV2Options = typeof options === "string" ? { description: options } : options
+  const key = JSON.stringify({
+    title: opts.title,
+    description: opts.description,
+    variant: opts.variant,
+    duration: opts.duration,
+    persistent: opts.persistent,
+    actions: opts.actions?.map((action) => [action.label, action.variant]),
   })
+  const active = activeToastV2ByKey.get(key)
+  const toasts = toast.getToasts()
+
+  if (active && toasts.at(-1)?.id === active.id) {
+    active.options = opts
+    publishToastV2(active)
+    pulseToastV2(active.id)
+    return active.id
+  }
+
+  if (active && toasts.some((item) => item.id === active.id)) toasterV2.dismiss(active.id)
+  releaseToastV2(active)
+
+  const entry: ActiveToastV2 = { id: --toastV2Id, key, options: opts }
+  entry.actions = createToastV2Actions(entry)
+  activeToastV2ByKey.set(key, entry)
+  activeToastV2ById.set(entry.id, entry)
+  publishToastV2(entry)
+  return entry.id
+}
+
+function publishToastV2(entry: ActiveToastV2) {
+  const release = () => releaseToastV2(entry)
+  toast(entry.options.title ?? "", {
+    id: entry.id,
+    description: entry.options.description,
+    icon: entry.options.icon,
+    action: entry.actions,
+    closeButton: true,
+    duration: entry.options.persistent ? Number.POSITIVE_INFINITY : entry.options.duration,
+    className: `toast-v2 toast-v2--${entry.options.variant ?? "default"}`,
+    testId: `toast-v2-${entry.id}`,
+    unstyled: true,
+    onDismiss: release,
+    onAutoClose: release,
+  })
+}
+
+function createToastV2Actions(entry: ActiveToastV2) {
+  if (!entry.options.actions?.length) return undefined
+  return (
+    <ToastV2.Actions>
+      {entry.options.actions.map((action, index) => (
+        <button
+          type="button"
+          data-component="button-v2"
+          data-variant={action.variant === "secondary" ? "ghost" : "neutral"}
+          data-size="small"
+          data-action-variant={action.variant ?? "primary"}
+          onClick={() => {
+            const onClick = entry.options.actions?.[index]?.onClick
+            if (typeof onClick === "function") onClick()
+            toasterV2.dismiss(entry.id)
+          }}
+        >
+          {action.label}
+        </button>
+      ))}
+    </ToastV2.Actions>
+  )
+}
+
+function pulseToastV2(toastId: number) {
+  if (typeof document === "undefined" || typeof requestAnimationFrame === "undefined") return
+  requestAnimationFrame(() => {
+    const element = document.querySelector<HTMLElement>(`[data-testid="toast-v2-${toastId}"]`)
+    if (!element || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return
+    element.animate([{ scale: 1 }, { scale: 1.025 }, { scale: 1 }], { duration: 160, easing: "ease-out" })
+  })
+}
+
+function releaseToastV2(entry: ActiveToastV2 | undefined) {
+  if (!entry) return
+  if (activeToastV2ByKey.get(entry.key) === entry) activeToastV2ByKey.delete(entry.key)
+  if (activeToastV2ById.get(entry.id) === entry) activeToastV2ById.delete(entry.id)
 }
 
 export interface ToastV2PromiseOptions<T, U = unknown> {

package/dist/context/marked-code-span.d.ts

@@ -1,10 +0,0 @@
-export declare const markedCodeSpanBoundary: {
-    tokenizer: {
-        inlineText(this: import("marked").Tokenizer<string, string>, src: string): false | {
-            type: "text";
-            raw: string;
-            text: string;
-            escaped: boolean;
-        };
-    };
-};

package/src/context/marked-code-span.ts

@@ -1,17 +0,0 @@
-import type { MarkedExtension } from "marked"
-
-// Keep adjacent tilde and backtick runs separate until markedjs/marked#4011 is released.
-export const markedCodeSpanBoundary = {
-  tokenizer: {
-    inlineText(src) {
-      const match = /^(`+(?=~)|~+(?=`))/.exec(src)
-      if (!match) return false
-      return {
-        type: "text",
-        raw: match[0],
-        text: match[0],
-        escaped: this.lexer.state.inRawBlock,
-      }
-    },
-  },
-} satisfies MarkedExtension