@opencode-ai/ui 0.0.0-dev-202609030903 → 0.0.0-dev-18996

package/src/{components → forms/checkbox}/checkbox.tsx

@@ -1,8 +1,8 @@
-import { Checkbox as Kobalte } from "@kobalte/core/checkbox"
+import { Control, Description, ErrorMessage, Indicator, Input, Label, Root } from "@kobalte/core/checkbox"
 import { Show, splitProps } from "solid-js"
 import type { ComponentProps, JSX, ParentProps } from "solid-js"
 
-export interface CheckboxProps extends ParentProps<ComponentProps<typeof Kobalte>> {
+export interface CheckboxProps extends ParentProps<ComponentProps<typeof Root>> {
   hideLabel?: boolean
   description?: string
   icon?: JSX.Element
@@ -11,10 +11,10 @@ export interface CheckboxProps extends ParentProps<ComponentProps<typeof Kobalte
 export function Checkbox(props: CheckboxProps) {
   const [local, others] = splitProps(props, ["children", "class", "label", "hideLabel", "description", "icon"])
   return (
-    <Kobalte {...others} data-component="checkbox">
-      <Kobalte.Input data-slot="checkbox-checkbox-input" />
-      <Kobalte.Control data-slot="checkbox-checkbox-control">
-        <Kobalte.Indicator data-slot="checkbox-checkbox-indicator">
+    <Root {...others} data-component="checkbox">
+      <Input data-slot="checkbox-checkbox-input" />
+      <Control data-slot="checkbox-checkbox-control">
+        <Indicator data-slot="checkbox-checkbox-indicator">
           {local.icon || (
             <svg viewBox="0 0 12 12" fill="none" width="10" height="10" xmlns="http://www.w3.org/2000/svg">
               <path
@@ -25,19 +25,19 @@ export function Checkbox(props: CheckboxProps) {
               />
             </svg>
           )}
-        </Kobalte.Indicator>
-      </Kobalte.Control>
+        </Indicator>
+      </Control>
       <div data-slot="checkbox-checkbox-content">
         <Show when={props.children}>
-          <Kobalte.Label data-slot="checkbox-checkbox-label" classList={{ "sr-only": local.hideLabel }}>
+          <Label data-slot="checkbox-checkbox-label" classList={{ "sr-only": local.hideLabel }}>
             {props.children}
-          </Kobalte.Label>
+          </Label>
         </Show>
         <Show when={local.description}>
-          <Kobalte.Description data-slot="checkbox-checkbox-description">{local.description}</Kobalte.Description>
+          <Description data-slot="checkbox-checkbox-description">{local.description}</Description>
         </Show>
-        <Kobalte.ErrorMessage data-slot="checkbox-checkbox-error" />
+        <ErrorMessage data-slot="checkbox-checkbox-error" />
       </div>
-    </Kobalte>
+    </Root>
   )
 }

package/src/{v2/components/field-v2.css → forms/field/field.css}

@@ -20,7 +20,7 @@
   font-style: normal;
   font-weight: 530;
   font-size: 13px;
-  line-height: 1;
+  line-height: var(--line-height-compact);
   letter-spacing: -0.04px;
   color: var(--v2-text-text-base);
   font-variation-settings: "slnt" 0;

package/src/{v2/components/field-v2.tsx → forms/field/field.tsx}

@@ -11,8 +11,8 @@ import {
   type ComponentProps,
   type ParentProps,
 } from "solid-js"
-import { TooltipV2 } from "./tooltip-v2"
-import "./field-v2.css"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+import "./field.css"
 
 type FieldContextValue = {
   controlId: string
@@ -40,14 +40,14 @@ function useField() {
 const CONTROL_SELECTOR = [
   "[data-slot='text-input-v2-input']",
   "[data-slot='textarea-v2-textarea']",
-  "[data-slot='inline-input-v2-input']",
+  "[data-component='inline-input']",
 ].join(", ")
 
-export interface FieldV2Props extends ComponentProps<"div"> {
+export interface FieldProps extends ComponentProps<"div"> {
   invalid?: boolean
 }
 
-function FieldV2Root(props: ParentProps<FieldV2Props>) {
+function FieldRoot(props: ParentProps<FieldProps>) {
   const [local, rest] = splitProps(props, ["invalid", "class", "classList", "children"])
 
   const controlId = `field-control-${createUniqueId()}`
@@ -86,7 +86,7 @@ function FieldV2Root(props: ParentProps<FieldV2Props>) {
     if (!control) return
 
     const shell = control.closest(
-      "[data-component='text-input-v2'], [data-component='textarea-v2'], [data-component='inline-input-v2']",
+      "[data-component='text-input-v2'], [data-component='textarea-v2'], [data-component='inline-input']",
     ) as HTMLElement | null
 
     control.id = controlId
@@ -173,7 +173,7 @@ function FieldLabel(props: ParentProps<FieldLabelProps>) {
       <span data-slot="field-v2-label-text">{local.children}</span>
       <Show when={local.tooltip}>
         {(tooltip) => (
-          <TooltipV2 value={tooltip()}>
+          <Tooltip value={tooltip()}>
             <button
               type="button"
               data-slot="field-v2-label-info"
@@ -182,7 +182,7 @@ function FieldLabel(props: ParentProps<FieldLabelProps>) {
             >
               <FieldLabelInfoIcon />
             </button>
-          </TooltipV2>
+          </Tooltip>
         )}
       </Show>
     </label>
@@ -255,11 +255,9 @@ function FieldControl(props: ParentProps<ComponentProps<"div">>) {
   )
 }
 
-export const FieldV2 = Object.assign(FieldV2Root, {
+export const Field = Object.assign(FieldRoot, {
   Label: FieldLabel,
   Prefix: FieldPrefix,
   Suffix: FieldSuffix,
   Control: FieldControl,
 })
-
-export const Field = FieldV2

package/src/{v2/components/radio-v2.tsx → forms/radio/radio.tsx}

@@ -1,18 +1,28 @@
-import { RadioGroup as Kobalte } from "@kobalte/core/radio-group"
+import {
+  Description,
+  ErrorMessage,
+  Item,
+  ItemControl,
+  ItemIndicator,
+  ItemInput,
+  ItemLabel,
+  Label,
+  Root,
+} from "@kobalte/core/radio-group"
 import { Show, splitProps, type JSX } from "solid-js"
 import type { ComponentProps, ParentProps } from "solid-js"
-import "./radio-v2.css"
+import "./radio.css"
 
-export interface RadioGroupV2Props extends ParentProps<ComponentProps<typeof Kobalte>> {
+export interface RadioGroupProps extends ParentProps<ComponentProps<typeof Root>> {
   label?: JSX.Element
   description?: JSX.Element
   hideLabel?: boolean
 }
 
-export function RadioGroupV2(props: RadioGroupV2Props) {
+export function RadioGroup(props: RadioGroupProps) {
   const [local, others] = splitProps(props, ["class", "classList", "children", "label", "description", "hideLabel"])
   return (
-    <Kobalte
+    <Root
       {...others}
       data-component="radio-v2"
       classList={{
@@ -22,30 +32,30 @@ export function RadioGroupV2(props: RadioGroupV2Props) {
     >
       <Show when={local.label}>
         {(label) => (
-          <Kobalte.Label data-slot="radio-v2-label" classList={{ "sr-only": local.hideLabel }}>
+          <Label data-slot="radio-v2-label" classList={{ "sr-only": local.hideLabel }}>
             {label()}
-          </Kobalte.Label>
+          </Label>
         )}
       </Show>
       <Show when={local.description}>
-        {(description) => <Kobalte.Description data-slot="radio-v2-description">{description()}</Kobalte.Description>}
+        {(description) => <Description data-slot="radio-v2-description">{description()}</Description>}
       </Show>
       <div data-slot="radio-v2-items">{local.children}</div>
-      <Kobalte.ErrorMessage data-slot="radio-v2-error" />
-    </Kobalte>
+      <ErrorMessage data-slot="radio-v2-error" />
+    </Root>
   )
 }
 
-export interface RadioItemV2Props extends ComponentProps<typeof Kobalte.Item> {
+export interface RadioItemProps extends ComponentProps<typeof Item> {
   label: JSX.Element
   description?: JSX.Element
   hideLabel?: boolean
 }
 
-export function RadioItemV2(props: RadioItemV2Props) {
+export function RadioItem(props: RadioItemProps) {
   const [local, others] = splitProps(props, ["class", "classList", "label", "description", "hideLabel"])
   return (
-    <Kobalte.Item
+    <Item
       {...others}
       data-slot="radio-v2-item"
       classList={{
@@ -53,20 +63,20 @@ export function RadioItemV2(props: RadioItemV2Props) {
         [local.class ?? ""]: !!local.class,
       }}
     >
-      <Kobalte.ItemInput data-slot="radio-v2-item-input" />
+      <ItemInput data-slot="radio-v2-item-input" />
       <div data-slot="radio-v2-item-control-stack">
-        <Kobalte.ItemControl data-slot="radio-v2-item-control">
-          <Kobalte.ItemIndicator data-slot="radio-v2-item-indicator" />
-        </Kobalte.ItemControl>
+        <ItemControl data-slot="radio-v2-item-control">
+          <ItemIndicator data-slot="radio-v2-item-indicator" />
+        </ItemControl>
       </div>
-      <Kobalte.ItemLabel data-slot="radio-v2-item-label" classList={{ "sr-only": local.hideLabel }}>
+      <ItemLabel data-slot="radio-v2-item-label" classList={{ "sr-only": local.hideLabel }}>
         <div data-slot="radio-v2-item-text">
           <span data-slot="radio-v2-item-label-text">{local.label}</span>
           <Show when={local.description}>
             {(description) => <span data-slot="radio-v2-item-description">{description()}</span>}
           </Show>
         </div>
-      </Kobalte.ItemLabel>
-    </Kobalte.Item>
+      </ItemLabel>
+    </Item>
   )
 }

package/src/{v2/components/select-v2.css → forms/select/select.css}

@@ -1,4 +1,4 @@
-@import "./menu-v2.css";
+@import "../../navigation/menu/menu.css";
 
 /* Above modal dialogs (z-index 50); matches legacy select-content. */
 [data-popper-positioner]:has([data-slot="select-v2-content"]) {
@@ -46,7 +46,7 @@
   }
 }
 
-/* Trigger shell — aligned with text-input-v2 */
+/* Shared trigger structure for the inline control. */
 [data-component="select-v2"] {
   box-sizing: border-box;
   display: flex;
@@ -73,12 +73,6 @@
     box-shadow 85ms ease-out;
 }
 
-[data-component="select-v2"][data-appearance="large"] {
-  height: 32px;
-  padding-block: 0;
-  padding-inline: 0 8px;
-}
-
 [data-component="select-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within):not(
     [data-expanded]
   ) {

package/src/{v2/components/select-v2.tsx → forms/select/select.tsx}

@@ -1,6 +1,17 @@
-import { Select as Kobalte } from "@kobalte/core/select"
+import {
+  Content,
+  Item,
+  ItemIndicator,
+  ItemLabel,
+  Listbox,
+  Portal,
+  Root,
+  Section,
+  Trigger,
+  Value,
+} from "@kobalte/core/select"
 import { Show, createMemo, onCleanup, splitProps, type ComponentProps, type JSX } from "solid-js"
-import "./select-v2.css"
+import "./select.css"
 
 function groupOptions<T>(options: T[], groupBy?: (x: T) => string): { category: string; options: T[] }[] {
   if (!groupBy) {
@@ -40,8 +51,8 @@ const CheckSmall = () => (
   </svg>
 )
 
-export type SelectV2Props<T> = Omit<
-  ComponentProps<typeof Kobalte<T, { category: string; options: T[] }>>,
+export type SelectProps<T> = Omit<
+  ComponentProps<typeof Root<T, { category: string; options: T[] }>>,
   "value" | "onSelect" | "children" | "options" | "itemComponent" | "sectionComponent" | "defaultValue" | "multiple"
 > & {
   placeholder?: string
@@ -53,15 +64,13 @@ export type SelectV2Props<T> = Omit<
   groupBy?: (x: T) => string
   onSelect?: (value: T | null) => void
   onHighlight?: (value: T | undefined) => void | (() => void)
-  /** `base` / `large` match text-input-v2; `inline` is a compact settings-row trigger. */
-  appearance?: "base" | "large" | "inline"
   invalid?: boolean
   numeric?: boolean
   children?: (item: T) => JSX.Element
   valueClass?: string
 }
 
-export function SelectV2<T>(props: SelectV2Props<T>) {
+export function Select<T>(props: SelectProps<T>) {
   const [local, others] = splitProps(props, [
     "class",
     "classList",
@@ -75,7 +84,6 @@ export function SelectV2<T>(props: SelectV2Props<T>) {
     "onHighlight",
     "onOpenChange",
     "children",
-    "appearance",
     "invalid",
     "numeric",
     "disabled",
@@ -88,8 +96,6 @@ export function SelectV2<T>(props: SelectV2Props<T>) {
     "fitViewport",
   ])
 
-  const inline = () => (local.appearance ?? "base") === "inline"
-
   const state: { key?: string; cleanup?: void | (() => void) } = {}
 
   const stop = () => {
@@ -118,15 +124,15 @@ export function SelectV2<T>(props: SelectV2Props<T>) {
   const grouped = createMemo(() => groupOptions(local.options, local.groupBy))
 
   return (
-    <Kobalte<T, { category: string; options: T[] }>
+    <Root<T, { category: string; options: T[] }>
       {...others}
       multiple={false}
       allowDuplicateSelectionEvents={false}
       disabled={local.disabled}
       data-component="select-v2-root"
-      placement={local.placement ?? (inline() ? "bottom-end" : "bottom-start")}
+      placement={local.placement ?? "bottom-end"}
       gutter={local.gutter ?? 4}
-      sameWidth={local.sameWidth ?? !inline()}
+      sameWidth={local.sameWidth ?? false}
       flip={local.flip ?? true}
       slide={local.slide ?? true}
       fitViewport={local.fitViewport ?? false}
@@ -137,31 +143,31 @@ export function SelectV2<T>(props: SelectV2Props<T>) {
       optionGroupChildren="options"
       placeholder={local.placeholder}
       sectionComponent={(sectionProps) => (
-        <Kobalte.Section>
+        <Section>
           <Show when={sectionProps.section.rawValue.category}>
             <div data-slot="menu-v2-group-label">{sectionProps.section.rawValue.category}</div>
           </Show>
-        </Kobalte.Section>
+        </Section>
       )}
       itemComponent={(itemProps) => (
-        <Kobalte.Item
+        <Item
           {...itemProps}
           data-component="menu-v2-item"
           onPointerEnter={() => move(itemProps.item.rawValue)}
           onPointerMove={() => move(itemProps.item.rawValue)}
           onFocus={() => move(itemProps.item.rawValue)}
         >
-          <Kobalte.ItemLabel data-slot="menu-v2-item-content" as="span">
+          <ItemLabel data-slot="menu-v2-item-content" as="span">
             {local.children
               ? local.children(itemProps.item.rawValue)
               : local.label
                 ? local.label(itemProps.item.rawValue)
                 : String(itemProps.item.rawValue as string)}
-          </Kobalte.ItemLabel>
-          <Kobalte.ItemIndicator data-slot="menu-v2-item-indicator" forceMount>
+          </ItemLabel>
+          <ItemIndicator data-slot="menu-v2-item-indicator" forceMount>
             <CheckSmall />
-          </Kobalte.ItemIndicator>
-        </Kobalte.Item>
+          </ItemIndicator>
+        </Item>
       )}
       onChange={(next) => {
         const v = next == null ? null : Array.isArray(next) ? ((next[0] as T) ?? null) : (next as T)
@@ -173,10 +179,12 @@ export function SelectV2<T>(props: SelectV2Props<T>) {
         if (!open) stop()
       }}
     >
-      <Kobalte.Trigger
+      <Trigger
         as="div"
+        aria-label={props["aria-label"]}
+        aria-labelledby={props["aria-labelledby"]}
         data-component="select-v2"
-        data-appearance={local.appearance ?? "base"}
+        data-appearance="inline"
         data-invalid={local.invalid ? "" : undefined}
         data-numeric={local.numeric ? "" : undefined}
         disabled={local.disabled}
@@ -187,23 +195,23 @@ export function SelectV2<T>(props: SelectV2Props<T>) {
         }}
       >
         <div data-slot="select-v2-value">
-          <Kobalte.Value<T> data-slot="select-v2-value-text" class={local.valueClass}>
+          <Value<T> data-slot="select-v2-value-text" class={local.valueClass}>
             {(st) => {
               const selected = st.selectedOption()
               if (local.label && selected != null) return local.label(selected)
               return selected != null ? (selected as string) : ""
             }}
-          </Kobalte.Value>
+          </Value>
         </div>
         <span data-slot="select-v2-chevron" aria-hidden="true">
           <ChevronDown />
         </span>
-      </Kobalte.Trigger>
-      <Kobalte.Portal>
-        <Kobalte.Content data-component="menu-v2-content" data-slot="select-v2-content">
-          <Kobalte.Listbox data-slot="select-v2-listbox" />
-        </Kobalte.Content>
-      </Kobalte.Portal>
-    </Kobalte>
+      </Trigger>
+      <Portal>
+        <Content data-component="menu-v2-content" data-slot="select-v2-content">
+          <Listbox data-slot="select-v2-listbox" />
+        </Content>
+      </Portal>
+    </Root>
   )
 }

package/src/{v2/components/switch-v2.css → forms/switch/switch.css}

@@ -160,3 +160,113 @@
     pointer-events: none;
   }
 }
+
+[data-component="switch"][data-appearance="standard"] {
+  [data-slot="switch-control"] {
+    padding: 0;
+    width: 28px;
+    height: 16px;
+    border-radius: 3px;
+    border: 1px solid var(--border-weak-base);
+    background: var(--surface-base);
+    box-shadow: none;
+    transition:
+      background-color 150ms,
+      border-color 150ms;
+  }
+
+  [data-slot="switch-thumb"] {
+    box-sizing: content-box;
+    width: 14px;
+    height: 14px;
+    border-radius: 2px;
+    border: 1px solid var(--border-base);
+    background: var(--icon-invert-base);
+    box-shadow:
+      0 1px 2px -1px rgba(19, 16, 16, 0.04),
+      0 1px 2px 0 rgba(19, 16, 16, 0.06),
+      0 1px 3px 0 rgba(19, 16, 16, 0.08);
+    transform: translateX(-1px);
+    transition:
+      transform 150ms,
+      background-color 150ms;
+  }
+
+  [data-slot="switch-label"] {
+    color: var(--text-base);
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  [data-slot="switch-description"] {
+    color: var(--text-base);
+    font-family: var(--font-family-sans);
+    font-size: 12px;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-normal);
+    letter-spacing: var(--letter-spacing-normal);
+  }
+
+  [data-slot="switch-error"] {
+    color: var(--text-error);
+  }
+
+  &:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
+    border-color: var(--border-hover);
+    background: var(--surface-hover);
+  }
+
+  &:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
+    width: 14px;
+    border-radius: 2px;
+  }
+
+  &:not([data-readonly]) [data-slot="switch-input"]:focus-visible ~ [data-slot="switch-control"] {
+    border-color: var(--border-focus);
+    outline: none;
+    box-shadow: var(--shadow-xs-border-focus);
+  }
+
+  &[data-checked] [data-slot="switch-control"] {
+    border-color: var(--icon-strong-base);
+    background: var(--icon-strong-base);
+    box-shadow: none;
+  }
+
+  &[data-checked] [data-slot="switch-thumb"],
+  &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
+    width: 14px;
+    border: none;
+    border-radius: 2px;
+    transform: translateX(12px);
+    background: var(--icon-invert-base);
+  }
+
+  &:dir(rtl)[data-checked] [data-slot="switch-thumb"],
+  &:dir(rtl)[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
+    transform: translateX(-12px);
+  }
+
+  &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
+    border-color: var(--border-hover);
+    background: var(--surface-hover);
+  }
+
+  &[data-disabled] [data-slot="switch-control"] {
+    border-color: var(--border-disabled);
+    background: var(--surface-disabled);
+    opacity: 1;
+  }
+
+  &[data-disabled] [data-slot="switch-thumb"] {
+    background: var(--icon-disabled);
+  }
+
+  &[data-invalid] [data-slot="switch-control"] {
+    border-color: var(--border-error);
+  }
+}

package/src/forms/switch/switch.tsx

@@ -0,0 +1,34 @@
+import { Control, Description, ErrorMessage, Input, Label, Root, Thumb } from "@kobalte/core/switch"
+import { Show, splitProps } from "solid-js"
+import type { ComponentProps, ParentProps } from "solid-js"
+import "./switch.css"
+
+export interface SwitchProps extends ParentProps<ComponentProps<typeof Root>> {
+  // I think we should consolidate - ask designers.
+  appearance?: "standard" | "compact"
+  hideLabel?: boolean
+  description?: string
+}
+
+export function Switch(props: SwitchProps) {
+  const [local, others] = splitProps(props, ["children", "class", "appearance", "hideLabel", "description"])
+  return (
+    <Root {...others} class={local.class} data-component="switch" data-appearance={local.appearance ?? "compact"}>
+      <Input data-slot="switch-input" />
+      <Show when={local.children}>
+        {(label) => (
+          <Label data-slot="switch-label" classList={{ "sr-only": local.hideLabel }}>
+            {label()}
+          </Label>
+        )}
+      </Show>
+      <Show when={local.description}>
+        <Description data-slot="switch-description">{local.description}</Description>
+      </Show>
+      <Control data-slot="switch-control">
+        <Thumb data-slot="switch-thumb" />
+      </Control>
+      <ErrorMessage data-slot="switch-error" />
+    </Root>
+  )
+}

package/src/{v2/components/text-input-v2.css → forms/text-input/text-input.css}

@@ -92,7 +92,7 @@
   font-style: normal;
   font-weight: 440;
   font-size: 13px;
-  line-height: 1;
+  line-height: var(--line-height-compact);
   letter-spacing: -0.04px;
   color: var(--v2-text-text-base);
   font-variation-settings: "slnt" 0;

package/src/{v2/components/text-input-v2.tsx → forms/text-input/text-input.tsx}

@@ -1,9 +1,9 @@
 import { type ComponentProps, type JSX, Show, splitProps } from "solid-js"
-import { Icon } from "./icon"
+import { Icon } from "@opencode-ai/ui/icon"
 import { useI18n } from "../../context/i18n"
-import "./text-input-v2.css"
+import "./text-input.css"
 
-export interface TextInputV2Props extends Omit<ComponentProps<"input">, "type"> {
+export interface TextInputProps extends Omit<ComponentProps<"input">, "type"> {
   /** Icon or adornment shown before the field value. */
   leadingIcon?: JSX.Element
   /** Show the trailing copy action. */
@@ -25,7 +25,7 @@ export interface TextInputV2Props extends Omit<ComponentProps<"input">, "type">
   type?: ComponentProps<"input">["type"]
 }
 
-export function TextInputV2(props: TextInputV2Props) {
+export function TextInput(props: TextInputProps) {
   const i18n = useI18n()
   const [local, inputProps] = splitProps(props, [
     "class",

package/src/{v2/components/textarea-v2.tsx → forms/textarea/textarea.tsx}

@@ -1,12 +1,12 @@
 import { type ComponentProps, splitProps } from "solid-js"
-import "./textarea-v2.css"
+import "./textarea.css"
 
-export interface TextareaV2Props extends ComponentProps<"textarea"> {
+export interface TextareaProps extends ComponentProps<"textarea"> {
   /** Error styling for the field and value text. */
   invalid?: boolean
 }
 
-export function TextareaV2(props: TextareaV2Props) {
+export function Textarea(props: TextareaProps) {
   const [local, textareaProps] = splitProps(props, ["class", "classList", "invalid", "disabled", "rows"])
 
   return (

package/src/hooks/create-auto-scroll.tsx

@@ -186,6 +186,26 @@ export function createAutoScroll(options: AutoScrollOptions) {
     },
   )
 
+  createEffect(() => {
+    const el = store.scrollRef
+    if (!el) return
+    const root = el.closest("main")
+    if (!root) return
+    let connected = el.isConnected
+    const contains = (node: Node) => node === el || (node instanceof Element && node.contains(el))
+    const observer = new MutationObserver((records) => {
+      records.forEach((record) => {
+        if ([...record.removedNodes].some(contains)) connected = false
+        if (!record.addedNodes.length || ![...record.addedNodes].some(contains)) return
+        const reattached = !connected
+        connected = true
+        if (reattached) scrollToBottom(false)
+      })
+    })
+    observer.observe(root, { childList: true })
+    onCleanup(() => observer.disconnect())
+  })
+
   createEffect(
     on(options.working, (working: boolean) => {
       settling = false