@opencode-ai/ui 1.18.9 → 1.18.11

package/dist/v2/components/toast-v2.d.ts

@@ -1,22 +1,21 @@
-import { Toast as Kobalte, toaster } from "@kobalte/core/toast";
-import type { ToastRootProps, ToastCloseButtonProps, ToastTitleProps, ToastDescriptionProps } from "@kobalte/core/toast";
+import { type ToasterProps } from "solid-sonner";
 import type { ComponentProps, JSX } from "solid-js";
+import "./button-v2.css";
 import "./toast-v2.css";
-export interface ToastV2RegionProps extends ComponentProps<typeof Kobalte.Region> {
+export interface ToastV2RegionProps extends ToasterProps {
 }
 declare function ToastV2Region(props: ToastV2RegionProps): JSX.Element;
-export interface ToastV2RootComponentProps extends ToastRootProps {
-    class?: string;
-    classList?: ComponentProps<"li">["classList"];
+export interface ToastV2RootComponentProps {
+    toastId: number;
     children?: JSX.Element;
 }
 declare function ToastV2Root(props: ToastV2RootComponentProps): JSX.Element;
 declare function ToastV2Icon(props: ComponentProps<"div">): JSX.Element;
 declare function ToastV2Content(props: ComponentProps<"div">): JSX.Element;
-declare function ToastV2Title(props: ToastTitleProps & ComponentProps<"div">): JSX.Element;
-declare function ToastV2Description(props: ToastDescriptionProps & ComponentProps<"div">): JSX.Element;
+declare function ToastV2Title(props: ComponentProps<"div">): JSX.Element;
+declare function ToastV2Description(props: ComponentProps<"div">): JSX.Element;
 declare function ToastV2Actions(props: ComponentProps<"div">): JSX.Element;
-declare function ToastV2CloseButton(props: ToastCloseButtonProps & ComponentProps<"button">): JSX.Element;
+declare function ToastV2CloseButton(props: ComponentProps<"button">): JSX.Element;
 export declare const ToastV2: typeof ToastV2Root & {
     Region: typeof ToastV2Region;
     Icon: typeof ToastV2Icon;
@@ -26,7 +25,15 @@ export declare const ToastV2: typeof ToastV2Root & {
     Actions: typeof ToastV2Actions;
     CloseButton: typeof ToastV2CloseButton;
 };
-export { toaster as toasterV2 };
+export declare const toasterV2: {
+    show(render: (props: {
+        toastId: number;
+    }) => JSX.Element, options?: {
+        duration?: number;
+        persistent?: boolean;
+    }): number;
+    dismiss(toastId?: number): string | number | undefined;
+};
 export interface ToastV2Action {
     label: string;
     variant?: "primary" | "secondary";
@@ -36,6 +43,7 @@ export interface ToastV2Options {
     title?: string;
     description?: string;
     icon?: JSX.Element;
+    variant?: "default" | "success" | "error" | "loading";
     duration?: number;
     persistent?: boolean;
     actions?: ToastV2Action[];
@@ -46,3 +54,4 @@ export interface ToastV2PromiseOptions<T, U = unknown> {
     success?: (data: T) => JSX.Element;
     error?: (error: U) => JSX.Element;
 }
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/ui",
-  "version": "1.18.9",
+  "version": "1.18.11",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -146,6 +146,7 @@
     "remend": "1.3.0",
     "shiki": "4.2.0",
     "solid-list": "0.3.0",
+    "solid-sonner": "0.3.1",
     "strip-ansi": "7.1.2"
   },
   "peerDependencies": {

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

@@ -1,114 +1,133 @@
-[data-component="toast-v2-region"] {
-  position: fixed;
-  bottom: 48px;
-  right: 32px;
+.toast-v2-region {
   z-index: 1000;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
   max-width: min(320px, calc(100vw - 64px));
-  max-height: none;
-  width: 100%;
-  overflow: visible;
   pointer-events: none;
-
-  [data-slot="toast-v2-list"] {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    max-height: none;
-    overflow-y: visible;
-    overflow-x: visible;
-    scrollbar-width: none;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
+  user-select: none;
+  -webkit-user-select: none;
 }
 
-[data-component="toast-v2"] {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
+.toast-v2 {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 20px;
+  column-gap: 12px;
+  row-gap: 12px;
   width: 320px;
+  max-width: 100%;
   padding: 12px;
   max-height: min(420px, calc(100dvh - 96px));
   overflow: hidden;
   pointer-events: auto;
-  transition: transform 140ms ease-out;
-
+  box-sizing: border-box;
+  outline: none;
+  user-select: none;
+  -webkit-user-select: none;
   border-radius: 8px;
   color: var(--v2-text-text-base);
   background: var(--v2-background-bg-layer-01);
   box-shadow: var(--v2-elevation-floating);
+  transition:
+    transform 280ms cubic-bezier(0.2, 0, 0, 1),
+    opacity 160ms ease-out,
+    height 280ms cubic-bezier(0.2, 0, 0, 1),
+    box-shadow 160ms ease-out;
+
+  &:has(> [data-icon]) {
+    grid-template-columns: 16px minmax(0, 1fr) 20px;
+  }
 
-  &[data-opened] {
-    animation: toastV2PopIn 140ms ease-out;
+  &:focus-visible {
+    box-shadow:
+      var(--v2-elevation-floating),
+      0 0 0 2px var(--v2-border-border-focus);
   }
 
-  &[data-closed] {
-    animation: toastV2PopOut 100ms ease-in forwards;
+  &[data-expanded="true"] {
+    overflow: visible;
   }
 
-  [data-slot="toast-v2-header"] {
-    display: flex;
-    align-items: flex-start;
-    gap: 12px;
-    width: 100%;
+  &[data-expanded="false"][data-front="false"] > * {
+    opacity: 0;
   }
 
-  [data-slot="toast-v2-icon"] {
-    flex-shrink: 0;
+  &[data-expanded="false"][data-front="false"] {
+    --y: translateY(calc(-1 * var(--toasts-before) * 9.5px)) scale(calc(1 - var(--toasts-before) * 0.05));
+  }
+
+  > [data-icon] {
+    grid-column: 1;
+    grid-row: 1;
+    align-self: start;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 16px;
     height: 20px;
-    min-width: 16px;
-    min-height: 20px;
     color: var(--v2-icon-icon-base);
-
-    [data-component="icon"] {
-      color: var(--v2-icon-icon-base);
-      width: 16px;
-      height: 16px;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    > * {
-      width: 16px;
-      height: 16px;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-    }
-
-    svg {
-      width: 16px;
-      height: 16px;
-      display: block;
-      flex-shrink: 0;
-    }
   }
 
-  [data-slot="toast-v2-content"] {
-    flex: 1;
+  > [data-content] {
+    grid-column: 1;
+    grid-row: 1;
     display: flex;
     flex-direction: column;
     gap: 4px;
-    min-height: 0;
     min-width: 0;
     overflow: hidden;
   }
 
+  &:has(> [data-icon]) > [data-content] {
+    grid-column: 2;
+  }
+
+  > [data-close-button] {
+    grid-column: 2;
+    grid-row: 1;
+    position: static;
+    align-self: start;
+    width: 20px;
+    height: 20px;
+    min-width: 20px;
+    min-height: 20px;
+    padding: 0;
+    border: 0;
+    border-radius: 4px;
+    transform: none;
+    background: transparent;
+    color: var(--v2-icon-icon-muted);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &:has(> [data-icon]) > [data-close-button] {
+    grid-column: 3;
+  }
+
+  > [data-close-button]:hover {
+    background: var(--v2-overlay-simple-overlay-hover);
+    color: var(--v2-icon-icon-base);
+  }
+
+  > [data-close-button]:active {
+    background: var(--v2-overlay-simple-overlay-pressed);
+  }
+
+  > [data-close-button]:focus-visible {
+    outline: 2px solid var(--v2-border-border-focus);
+    outline-offset: 2px;
+  }
+
+  > [data-icon] > *,
+  > [data-icon] svg,
+  > [data-close-button] svg {
+    width: 16px;
+    height: 16px;
+    display: block;
+    flex-shrink: 0;
+  }
+
+  [data-title],
   [data-slot="toast-v2-title"] {
     color: var(--v2-text-text-base);
     overflow: hidden;
@@ -123,6 +142,7 @@
     margin: 0;
   }
 
+  [data-description],
   [data-slot="toast-v2-description"] {
     color: var(--v2-text-text-muted);
     text-wrap-style: pretty;
@@ -138,10 +158,15 @@
   }
 
   [data-slot="toast-v2-actions"] {
+    grid-column: 1;
+    grid-row: 2;
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
-    padding-left: 28px;
+  }
+
+  &:has(> [data-icon]) [data-slot="toast-v2-actions"] {
+    grid-column: 2;
   }
 
   [data-slot="toast-v2-actions"] [data-component="button-v2"] {
@@ -154,62 +179,47 @@
     font-synthesis: none;
   }
 
-  [data-slot="toast-v2-close-button"] {
+  [data-slot="toast-v2-header"] {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    width: 100%;
+  }
+
+  [data-slot="toast-v2-icon"] {
     flex-shrink: 0;
-    width: 20px;
-    height: 20px;
-    min-width: 20px;
-    min-height: 20px;
-    padding: 0;
-    border: 0;
-    border-radius: 4px;
-    background: transparent;
-    color: var(--v2-icon-icon-muted);
-    cursor: pointer;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
+    width: 16px;
+    height: 20px;
+    color: var(--v2-icon-icon-base);
+  }
 
-    &:hover {
-      background: var(--v2-overlay-simple-overlay-hover);
-      color: var(--v2-icon-icon-base);
-    }
-
-    &:active {
-      background: var(--v2-overlay-simple-overlay-pressed);
-    }
-
-    &:focus-visible {
-      outline: 2px solid var(--v2-border-border-focus);
-      outline-offset: 2px;
-    }
-
-    svg {
-      width: 16px;
-      height: 16px;
-      display: block;
-    }
+  [data-slot="toast-v2-content"] {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+    overflow: hidden;
   }
 }
 
-@keyframes toastV2PopIn {
-  from {
-    opacity: 0.8;
-    transform: translateY(6px);
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
+@media (prefers-reduced-motion: reduce) {
+  .toast-v2,
+  .toast-v2 > * {
+    animation: none !important;
+    transition: none !important;
   }
 }
 
-@keyframes toastV2PopOut {
-  from {
-    transform: translateY(0);
-    opacity: 1;
+@media (max-width: 600px) {
+  .toast-v2-region {
+    max-width: calc(100vw - 32px);
   }
-  to {
-    transform: translateY(6px);
-    opacity: 0.8;
+
+  .toast-v2 {
+    width: 100%;
   }
 }

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

@@ -1,40 +1,78 @@
-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 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 "./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 [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="bottom-right"
+        offset={{ 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 ?? "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 +83,43 @@ 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 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="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 +133,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 +167,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> {