@opencode-ai/ui 0.0.0-next-17389 → 0.0.0-next-17394

package/dist/components/scroll-view.d.ts

@@ -1,4 +1,4 @@
-import { type Accessor, type ComponentProps } from "solid-js";
+import { type ComponentProps } from "solid-js";
 export type ScrollViewThumbVisibility = "hover" | "scroll";
 export interface ScrollViewProps extends ComponentProps<"div"> {
     viewportRef?: (el: HTMLDivElement) => void;
@@ -11,9 +11,9 @@ export interface ScrollViewProps extends ComponentProps<"div"> {
      * */
     thumbVisibility?: ScrollViewThumbVisibility;
     /** Mount the thumb into an external track. Scroll metrics still come from this ScrollView. */
-    thumbContainer?: HTMLElement | Accessor<HTMLElement | undefined>;
+    thumbContainer?: HTMLElement;
     /** Element whose hover reveals the thumb. Defaults to the ScrollView root when unset. */
-    thumbHoverTarget?: HTMLElement | Accessor<HTMLElement | undefined>;
+    thumbHoverTarget?: HTMLElement;
 }
 export declare const scrollKey: (event: Pick<KeyboardEvent, "key" | "altKey" | "ctrlKey" | "metaKey" | "shiftKey">) => "end" | "home" | "page-down" | "page-up" | "up" | "down" | undefined;
 export declare function canScrollKey(element: HTMLElement, key: NonNullable<ReturnType<typeof scrollKey>>): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/ui",
-  "version": "0.0.0-next-17389",
+  "version": "0.0.0-next-17394",
   "type": "module",
   "license": "MIT",
   "repository": {

package/src/components/card.tsx

@@ -1,4 +1,4 @@
-import { type ComponentProps, splitProps } from "solid-js"
+import { type ComponentProps, Show, splitProps } from "solid-js"
 import { Icon, type IconProps } from "./icon"
 
 type Variant = "normal" | "error" | "warning" | "success" | "info"
@@ -80,11 +80,11 @@ export function CardTitle(props: CardTitleProps) {
         [split.class ?? ""]: !!split.class,
       }}
     >
-      {show() ? (
+      <Show when={show()}>
         <span data-slot="card-title-icon" data-placeholder={placeholder() || undefined}>
           <Icon name={name() ?? "dash"} size="small" />
         </span>
-      ) : null}
+      </Show>
       {split.children}
     </div>
   )

package/src/components/list.tsx

@@ -367,9 +367,11 @@ export function List<T>(props: ListProps<T> & { ref?: (ref: ListRef) => void })
                                 </span>
                               )}
                             </Show>
-                            {props.divider && (i() !== group.items.length - 1 || (showAdd() && isLastGroup())) && (
+                            <Show
+                              when={props.divider && (i() !== group.items.length - 1 || (showAdd() && isLastGroup()))}
+                            >
                               <span data-slot="list-item-divider" />
-                            )}
+                            </Show>
                           </button>
                         )
                         if (props.itemWrapper) return props.itemWrapper(item, node)

package/src/components/scroll-view.tsx

@@ -1,14 +1,4 @@
-import {
-  createEffect,
-  createMemo,
-  mergeProps,
-  onCleanup,
-  onMount,
-  Show,
-  splitProps,
-  type Accessor,
-  type ComponentProps,
-} from "solid-js"
+import { createEffect, mergeProps, onCleanup, onMount, Show, splitProps, type ComponentProps } from "solid-js"
 import { Portal } from "solid-js/web"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
 import { createStore } from "solid-js/store"
@@ -27,9 +17,9 @@ export interface ScrollViewProps extends ComponentProps<"div"> {
    * */
   thumbVisibility?: ScrollViewThumbVisibility
   /** Mount the thumb into an external track. Scroll metrics still come from this ScrollView. */
-  thumbContainer?: HTMLElement | Accessor<HTMLElement | undefined>
+  thumbContainer?: HTMLElement
   /** Element whose hover reveals the thumb. Defaults to the ScrollView root when unset. */
-  thumbHoverTarget?: HTMLElement | Accessor<HTMLElement | undefined>
+  thumbHoverTarget?: HTMLElement
 }
 
 export const scrollKey = (event: Pick<KeyboardEvent, "key" | "altKey" | "ctrlKey" | "metaKey" | "shiftKey">) => {
@@ -128,13 +118,8 @@ export function ScrollView(props: ScrollViewProps) {
   let viewportRef!: HTMLDivElement
   let thumbRef!: HTMLDivElement
 
-  const resolveEl = (value: HTMLElement | Accessor<HTMLElement | undefined> | undefined) => {
-    if (typeof value === "function") return value()
-    return value
-  }
-
-  const thumbMount = createMemo(() => resolveEl(local.thumbContainer))
-  const thumbHover = createMemo(() => resolveEl(local.thumbHoverTarget))
+  const thumbMount = () => local.thumbContainer
+  const thumbHover = () => local.thumbHoverTarget
   const hoverRoot = () => !local.thumbHoverTarget && !local.thumbContainer
 
   const [state, setState] = createStore({

package/src/components/toast.tsx

@@ -1,7 +1,7 @@
 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 { For, Show } from "solid-js"
 import { Portal } from "solid-js/web"
 import { useI18n } from "../context/i18n"
 import { Icon, type IconProps } from "./icon"
@@ -136,19 +136,21 @@ export function showToast(options: ToastOptions | string) {
         </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>
-            ))}
+            <For each={opts.actions}>
+              {(action) => (
+                <button
+                  data-slot="toast-action"
+                  onClick={() => {
+                    if (typeof action.onClick === "function") {
+                      action.onClick()
+                    }
+                    toaster.dismiss(props.toastId)
+                  }}
+                >
+                  {action.label}
+                </button>
+              )}
+            </For>
           </Toast.Actions>
         </Show>
       </Toast.Content>

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

@@ -59,7 +59,7 @@ export function DialogHeader(props: DialogHeaderProps) {
   return (
     <div data-slot="dialog-header" data-hide-close={hideClose() ? "" : undefined}>
       {local.children}
-      {!hideClose() && (
+      <Show when={!hideClose()}>
         <Kobalte.CloseButton data-slot="dialog-close-button" aria-label={local.closeLabel ?? i18n.t("ui.common.close")}>
           <svg
             width="16"
@@ -76,7 +76,7 @@ export function DialogHeader(props: DialogHeaderProps) {
             />
           </svg>
         </Kobalte.CloseButton>
-      )}
+      </Show>
     </div>
   )
 }

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

@@ -239,6 +239,8 @@ function createToastV2Actions(entry: ActiveToastV2) {
   if (!entry.options.actions?.length) return undefined
   return (
     <ToastV2.Actions>
+      {/* Static map, not <For>: this JSX is created imperatively outside any Solid
+          root, where a <For> computation would never be disposed. */}
       {entry.options.actions.map((action, index) => (
         <button
           type="button"