refactor(app): extract useElementHeight hook and clean up todo dock

- Extract shared useElementHeight hook into @opencode-ai/ui/hooks,
  replacing duplicated ResizeObserver patterns in session-composer-region
  and session-todo-dock
- Replace 13 animation tuning props with module-level constants (they
  were always passed as undefined from session.tsx)
- Export COLLAPSED_HEIGHT from session-todo-dock to share with
  session-composer-region
- Strip unnecessary clamps on critically damped springs
- Remove ~280 lines of dead slider UI from todo-panel-motion story

packages/app/src/pages/session/composer/session-composer-region.tsx

@@ -1,7 +1,7 @@
-import { Show, createEffect, createMemo, createSignal, onCleanup } from "solid-js"
-import { createStore } from "solid-js/store"
+import { Show, createMemo, createSignal, createEffect } from "solid-js"
 import { useParams } from "@solidjs/router"
 import { useSpring } from "@opencode-ai/ui/motion-spring"
+import { useElementHeight } from "@opencode-ai/ui/hooks"
 import { PromptInput } from "@/components/prompt-input"
 import { useLanguage } from "@/context/language"
 import { usePrompt } from "@/context/prompt"
@@ -9,11 +9,12 @@ import { getSessionHandoff, setSessionHandoff } from "@/pages/session/handoff"
 import { SessionPermissionDock } from "@/pages/session/composer/session-permission-dock"
 import { SessionQuestionDock } from "@/pages/session/composer/session-question-dock"
 import type { SessionComposerState } from "@/pages/session/composer/session-composer-state"
-import { SessionTodoDock } from "@/pages/session/composer/session-todo-dock"
+import { SessionTodoDock, COLLAPSED_HEIGHT } from "@/pages/session/composer/session-todo-dock"
+
+const DOCK_SPRING = { visualDuration: 0.3, bounce: 0 }
 
 export function SessionComposerRegion(props: {
   state: SessionComposerState
-  ready: boolean
   centered: boolean
   inputRef: (el: HTMLDivElement) => void
   newSessionWorktree: string
@@ -21,23 +22,6 @@ export function SessionComposerRegion(props: {
   onSubmit: () => void
   onResponseSubmit: () => void
   setPromptDockRef: (el: HTMLDivElement) => void
-  visualDuration?: number
-  bounce?: number
-  dockOpenVisualDuration?: number
-  dockOpenBounce?: number
-  dockCloseVisualDuration?: number
-  dockCloseBounce?: number
-  drawerExpandVisualDuration?: number
-  drawerExpandBounce?: number
-  drawerCollapseVisualDuration?: number
-  drawerCollapseBounce?: number
-  subtitleDuration?: number
-  subtitleTravel?: number
-  subtitleEdge?: number
-  countDuration?: number
-  countMask?: number
-  countMaskHeight?: number
-  countWidthDuration?: number
 }) {
   const params = useParams()
   const prompt = usePrompt()
@@ -63,76 +47,15 @@ export function SessionComposerRegion(props: {
     setSessionHandoff(sessionKey(), { prompt: previewPrompt() })
   })
 
-  const [gate, setGate] = createStore({
-    ready: false,
-  })
-  let timer: number | undefined
-  let frame: number | undefined
-
-  const clear = () => {
-    if (timer !== undefined) {
-      window.clearTimeout(timer)
-      timer = undefined
-    }
-    if (frame !== undefined) {
-      cancelAnimationFrame(frame)
-      frame = undefined
-    }
-  }
-
-  createEffect(() => {
-    sessionKey()
-    const ready = props.ready
-    const delay = 140
-
-    clear()
-    setGate("ready", false)
-    if (!ready) return
-
-    frame = requestAnimationFrame(() => {
-      frame = undefined
-      timer = window.setTimeout(() => {
-        setGate("ready", true)
-        timer = undefined
-      }, delay)
-    })
-  })
-
-  onCleanup(clear)
-
-  const open = createMemo(() => gate.ready && props.state.dock() && !props.state.closing())
-  const config = createMemo(() =>
-    open()
-      ? {
-          visualDuration: props.dockOpenVisualDuration ?? props.visualDuration ?? 0.3,
-          bounce: props.dockOpenBounce ?? props.bounce ?? 0,
-        }
-      : {
-          visualDuration: props.dockCloseVisualDuration ?? props.visualDuration ?? 0.3,
-          bounce: props.dockCloseBounce ?? props.bounce ?? 0,
-        },
-  )
+  const open = createMemo(() => props.state.dock() && !props.state.closing())
   const progress = useSpring(
     () => (open() ? 1 : 0),
-    config,
+    DOCK_SPRING,
   )
-  const value = createMemo(() => Math.max(0, Math.min(1, progress())))
-  const [height, setHeight] = createSignal(320)
-  const dock = createMemo(() => (gate.ready && props.state.dock()) || value() > 0.001)
-  const full = createMemo(() => Math.max(78, height()))
+  const dock = createMemo(() => props.state.dock() || progress() > 0.001)
   const [contentRef, setContentRef] = createSignal<HTMLDivElement>()
-
-  createEffect(() => {
-    const el = contentRef()
-    if (!el) return
-    const update = () => {
-      setHeight(el.getBoundingClientRect().height)
-    }
-    update()
-    const observer = new ResizeObserver(update)
-    observer.observe(el)
-    onCleanup(() => observer.disconnect())
-  })
+  const height = useElementHeight(contentRef, 320)
+  const full = createMemo(() => Math.max(COLLAPSED_HEIGHT, height()))
 
   return (
     <div
@@ -182,10 +105,10 @@ export function SessionComposerRegion(props: {
               <div
                 classList={{
                   "overflow-hidden": true,
-                  "pointer-events-none": value() < 0.98,
+                  "pointer-events-none": progress() < 0.98,
                 }}
                 style={{
-                  "max-height": `${full() * value()}px`,
+                  "max-height": `${full() * progress()}px`,
                 }}
               >
                 <div ref={setContentRef}>
@@ -194,20 +117,7 @@ export function SessionComposerRegion(props: {
                     title={language.t("session.todo.title")}
                     collapseLabel={language.t("session.todo.collapse")}
                     expandLabel={language.t("session.todo.expand")}
-                    dockProgress={value()}
-                    visualDuration={props.visualDuration}
-                    bounce={props.bounce}
-                    expandVisualDuration={props.drawerExpandVisualDuration}
-                    expandBounce={props.drawerExpandBounce}
-                    collapseVisualDuration={props.drawerCollapseVisualDuration}
-                    collapseBounce={props.drawerCollapseBounce}
-                    subtitleDuration={props.subtitleDuration}
-                    subtitleTravel={props.subtitleTravel}
-                    subtitleEdge={props.subtitleEdge}
-                    countDuration={props.countDuration}
-                    countMask={props.countMask}
-                    countMaskHeight={props.countMaskHeight}
-                    countWidthDuration={props.countWidthDuration}
+                    dockProgress={progress()}
                   />
                 </div>
               </div>
@@ -217,7 +127,7 @@ export function SessionComposerRegion(props: {
                 "relative z-10": true,
               }}
               style={{
-                "margin-top": `${-36 * value()}px`,
+                "margin-top": `${-36 * progress()}px`,
               }}
             >
               <PromptInput

packages/app/src/pages/session/composer/session-todo-dock.tsx

@@ -6,9 +6,15 @@ import { IconButton } from "@opencode-ai/ui/icon-button"
 import { useSpring } from "@opencode-ai/ui/motion-spring"
 import { TextReveal } from "@opencode-ai/ui/text-reveal"
 import { TextStrikethrough } from "@opencode-ai/ui/text-strikethrough"
+import { useElementHeight } from "@opencode-ai/ui/hooks"
 import { Index, createEffect, createMemo, createSignal, on, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 
+const COLLAPSE_SPRING = { visualDuration: 0.3, bounce: 0 }
+export const COLLAPSED_HEIGHT = 78
+const SUBTITLE = { duration: 600, travel: 25, edge: 17 }
+const COUNT = { duration: 600, mask: 18, maskHeight: 0, widthDuration: 560 }
+
 function dot(status: Todo["status"]) {
   if (status !== "in_progress") return undefined
   return (
@@ -40,19 +46,6 @@ export function SessionTodoDock(props: {
   collapseLabel: string
   expandLabel: string
   dockProgress?: number
-  visualDuration?: number
-  bounce?: number
-  expandVisualDuration?: number
-  expandBounce?: number
-  collapseVisualDuration?: number
-  collapseBounce?: number
-  subtitleDuration?: number
-  subtitleTravel?: number
-  subtitleEdge?: number
-  countDuration?: number
-  countMask?: number
-  countMaskHeight?: number
-  countWidthDuration?: number
 }) {
   const [store, setStore] = createStore({
     collapsed: false,
@@ -73,37 +66,12 @@ export function SessionTodoDock(props: {
   )
 
   const preview = createMemo(() => active()?.content ?? "")
-  const config = createMemo(() =>
-    store.collapsed
-      ? {
-          visualDuration: props.collapseVisualDuration ?? props.visualDuration ?? 0.3,
-          bounce: props.collapseBounce ?? props.bounce ?? 0,
-        }
-      : {
-          visualDuration: props.expandVisualDuration ?? props.visualDuration ?? 0.3,
-          bounce: props.expandBounce ?? props.bounce ?? 0,
-        },
-  )
-  const collapse = useSpring(() => (store.collapsed ? 1 : 0), config)
-  const dock = createMemo(() => Math.max(0, Math.min(1, props.dockProgress ?? 1)))
-  const shut = createMemo(() => 1 - dock())
-  const value = createMemo(() => Math.max(0, Math.min(1, collapse())))
-  const hide = createMemo(() => Math.max(value(), shut()))
-  const [height, setHeight] = createSignal(320)
-  const full = createMemo(() => Math.max(78, height()))
+  const collapse = useSpring(() => (store.collapsed ? 1 : 0), COLLAPSE_SPRING)
+  const shut = createMemo(() => 1 - (props.dockProgress ?? 1))
+  const hide = createMemo(() => Math.max(collapse(), shut()))
   let contentRef: HTMLDivElement | undefined
-
-  createEffect(() => {
-    const el = contentRef
-    if (!el) return
-    const update = () => {
-      setHeight(el.getBoundingClientRect().height)
-    }
-    update()
-    const observer = new ResizeObserver(update)
-    observer.observe(el)
-    onCleanup(() => observer.disconnect())
-  })
+  const height = useElementHeight(() => contentRef, 320)
+  const full = createMemo(() => Math.max(COLLAPSED_HEIGHT, height()))
 
   return (
     <DockTray
@@ -111,7 +79,7 @@ export function SessionTodoDock(props: {
       style={{
         "overflow-x": "visible",
         "overflow-y": "hidden",
-        "max-height": `${Math.max(78, full() - value() * (full() - 78))}px`,
+        "max-height": `${Math.max(COLLAPSED_HEIGHT, full() - collapse() * (full() - COLLAPSED_HEIGHT))}px`,
       }}
     >
       <div ref={contentRef}>
@@ -131,12 +99,12 @@ export function SessionTodoDock(props: {
             class="text-14-regular text-text-strong cursor-default inline-flex items-baseline shrink-0 whitespace-nowrap overflow-visible"
             aria-label={label()}
             style={{
-              "--tool-motion-odometer-ms": `${props.countDuration ?? 600}ms`,
-              "--tool-motion-mask": `${props.countMask ?? 18}%`,
-              "--tool-motion-mask-height": `${props.countMaskHeight ?? 0}px`,
-              "--tool-motion-spring-ms": `${props.countWidthDuration ?? 560}ms`,
-              opacity: `${Math.max(0, Math.min(1, 1 - shut()))}`,
-              filter: `blur(${Math.max(0, Math.min(1, shut())) * 2}px)`,
+              "--tool-motion-odometer-ms": `${COUNT.duration}ms`,
+              "--tool-motion-mask": `${COUNT.mask}%`,
+              "--tool-motion-mask-height": `${COUNT.maskHeight}px`,
+              "--tool-motion-spring-ms": `${COUNT.widthDuration}ms`,
+              opacity: `${1 - shut()}`,
+              filter: shut() > 0.01 ? `blur(${shut() * 2}px)` : "none",
             }}
           >
             <AnimatedNumber value={done()} />
@@ -155,9 +123,9 @@ export function SessionTodoDock(props: {
             <TextReveal
               class="text-14-regular text-text-base cursor-default"
               text={store.collapsed ? preview() : undefined}
-              duration={props.subtitleDuration ?? 600}
-              travel={props.subtitleTravel ?? 25}
-              edge={props.subtitleEdge ?? 17}
+              duration={SUBTITLE.duration}
+              travel={SUBTITLE.travel}
+              edge={SUBTITLE.edge}
               spring="cubic-bezier(0.34, 1, 0.64, 1)"
               springSoft="cubic-bezier(0.34, 1, 0.64, 1)"
               growOnly
@@ -171,7 +139,7 @@ export function SessionTodoDock(props: {
               icon="chevron-down"
               size="normal"
               variant="ghost"
-              style={{ transform: `rotate(${value() * 180}deg)` }}
+              style={{ transform: `rotate(${collapse() * 180}deg)` }}
               onMouseDown={(event) => {
                 event.preventDefault()
                 event.stopPropagation()
@@ -187,13 +155,14 @@ export function SessionTodoDock(props: {
 
         <div
           data-slot="session-todo-list"
+          class="pb-2"
           aria-hidden={store.collapsed}
           classList={{
             "pointer-events-none": hide() > 0.1,
           }}
           style={{
-            opacity: `${Math.max(0, Math.min(1, 1 - hide()))}`,
-            filter: `blur(${Math.max(0, Math.min(1, hide())) * 2}px)`,
+            opacity: `${1 - hide()}`,
+            filter: hide() > 0.01 ? `blur(${hide() * 2}px)` : "none",
             visibility: hide() > 0.98 ? "hidden" : "visible",
           }}
         >
@@ -279,10 +248,8 @@ function TodoList(props: { todos: Todo[]; open: boolean }) {
               style={{
                 "--checkbox-align": "flex-start",
                 "--checkbox-offset": "1px",
-                transition:
-                  "opacity 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)), filter 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1))",
-                opacity: todo().status === "pending" ? "0.94" : "1",
-                filter: todo().status === "pending" ? "blur(0.3px)" : "blur(0px)",
+                transition: "opacity 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1))",
+                opacity: todo().status === "pending" ? "0.5" : "1",
               }}
             >
               <TextStrikethrough
@@ -292,13 +259,11 @@ function TodoList(props: { todos: Todo[]; open: boolean }) {
                 style={{
                   "line-height": "var(--line-height-normal)",
                   transition:
-                    "color 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)), opacity 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)), filter 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1))",
+                    "color 220ms var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1))",
                   color:
                     todo().status === "completed" || todo().status === "cancelled"
                       ? "var(--text-weak)"
                       : "var(--text-strong)",
-                  opacity: todo().status === "pending" ? "0.92" : "1",
-                  filter: todo().status === "pending" ? "blur(0.3px)" : "blur(0px)",
                 }}
               />
             </Checkbox>

packages/ui/src/components/todo-panel-motion.stories.tsx

@@ -131,22 +131,7 @@ export const Playground = {
     const global = useGlobalSync()
     const [open, setOpen] = createSignal(true)
     const [step, setStep] = createSignal(1)
-    const [dockOpenDuration, setDockOpenDuration] = createSignal(0.3)
-    const [dockOpenBounce, setDockOpenBounce] = createSignal(0)
     const [dockCloseDuration, setDockCloseDuration] = createSignal(0.3)
-    const [dockCloseBounce, setDockCloseBounce] = createSignal(0)
-    const [drawerExpandDuration, setDrawerExpandDuration] = createSignal(0.3)
-    const [drawerExpandBounce, setDrawerExpandBounce] = createSignal(0)
-    const [drawerCollapseDuration, setDrawerCollapseDuration] = createSignal(0.3)
-    const [drawerCollapseBounce, setDrawerCollapseBounce] = createSignal(0)
-    const [subtitleDuration, setSubtitleDuration] = createSignal(600)
-    const [subtitleAuto, setSubtitleAuto] = createSignal(true)
-    const [subtitleTravel, setSubtitleTravel] = createSignal(25)
-    const [subtitleEdge, setSubtitleEdge] = createSignal(17)
-    const [countDuration, setCountDuration] = createSignal(600)
-    const [countMask, setCountMask] = createSignal(18)
-    const [countMaskHeight, setCountMaskHeight] = createSignal(0)
-    const [countWidthDuration, setCountWidthDuration] = createSignal(560)
     const state = createSessionComposerState({ closeMs: () => Math.round(dockCloseDuration() * 1000) })
     let frame
     let composerRef
@@ -256,21 +241,6 @@ export const Playground = {
                     onSubmit={() => {}}
                     onResponseSubmit={pin}
                     setPromptDockRef={() => {}}
-                    dockOpenVisualDuration={dockOpenDuration()}
-                    dockOpenBounce={dockOpenBounce()}
-                    dockCloseVisualDuration={dockCloseDuration()}
-                    dockCloseBounce={dockCloseBounce()}
-                    drawerExpandVisualDuration={drawerExpandDuration()}
-                    drawerExpandBounce={drawerExpandBounce()}
-                    drawerCollapseVisualDuration={drawerCollapseDuration()}
-                    drawerCollapseBounce={drawerCollapseBounce()}
-                    subtitleDuration={subtitleDuration()}
-                    subtitleTravel={subtitleAuto() ? undefined : subtitleTravel()}
-                    subtitleEdge={subtitleAuto() ? undefined : subtitleEdge()}
-                    countDuration={countDuration()}
-                    countMask={countMask()}
-                    countMaskHeight={countMaskHeight()}
-                    countWidthDuration={countWidthDuration()}
                   />
                 </div>
               </div>
@@ -279,62 +249,21 @@ export const Playground = {
         </div>
 
         <div style={{ display: "flex", gap: "8px", "flex-wrap": "wrap" }}>
-          <button onClick={toggleDock} style={btn(dockOpen())}>
-            {dockOpen() ? "Animate close" : "Animate open"}
-          </button>
-          <button onClick={toggleDrawer} style={btn(dockOpen() && collapsed())}>
-            {dockOpen() && collapsed() ? "Expand todo dock" : "Collapse todo dock"}
-          </button>
-          <button onClick={cycle} style={btn(step() > 0)}>
-            Cycle progress ({step()}/3 done)
-          </button>
-          {[0, 1, 2, 3].map((value) => (
-            <button onClick={() => setStep(value)} style={btn(step() === value)}>
-              {value} done
+          {(
+            [
+              ["Toggle dock", toggleDock],
+              ["Toggle drawer", toggleDrawer],
+              ["Cycle todos", cycle],
+            ] as const
+          ).map(([label, fn]) => (
+            <button type="button" style={btn()} onClick={fn}>
+              {label}
             </button>
           ))}
         </div>
 
         <div style={{ display: "grid", gap: "10px", "max-width": "560px" }}>
-          <div style={{ "font-size": "12px", color: "var(--color-text-secondary, #a3a3a3)" }}>Dock open</div>
-          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
-            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
-              duration
-            </span>
-            <input
-              type="range"
-              min="0.1"
-              max="1"
-              step="0.01"
-              value={dockOpenDuration()}
-              onInput={(event) => setDockOpenDuration(event.currentTarget.valueAsNumber)}
-              style={{ flex: 1 }}
-            />
-            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
-              {Math.round(dockOpenDuration() * 1000)}ms
-            </span>
-          </label>
-          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
-            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
-              bounce
-            </span>
-            <input
-              type="range"
-              min="0"
-              max="1"
-              step="0.01"
-              value={dockOpenBounce()}
-              onInput={(event) => setDockOpenBounce(event.currentTarget.valueAsNumber)}
-              style={{ flex: 1 }}
-            />
-            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
-              {dockOpenBounce().toFixed(2)}
-            </span>
-          </label>
-
-          <div style={{ "font-size": "12px", color: "var(--color-text-secondary, #a3a3a3)", "margin-top": "4px" }}>
-            Dock close
-          </div>
+          <div style={{ "font-size": "12px", color: "var(--color-text-secondary, #a3a3a3)" }}>Dock close</div>
           <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
             <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
               duration
@@ -352,231 +281,6 @@ export const Playground = {
               {Math.round(dockCloseDuration() * 1000)}ms
             </span>
           </label>
-          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
-            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
-              bounce
-            </span>
-            <input
-              type="range"
-              min="0"
-              max="1"
-              step="0.01"
-              value={dockCloseBounce()}
-              onInput={(event) => setDockCloseBounce(event.currentTarget.valueAsNumber)}
-              style={{ flex: 1 }}
-            />
-            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
-              {dockCloseBounce().toFixed(2)}
-            </span>
-          </label>
-
-          <div style={{ "font-size": "12px", color: "var(--color-text-secondary, #a3a3a3)", "margin-top": "4px" }}>
-            Drawer expand
-          </div>
-          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
-            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
-              duration
-            </span>
-            <input
-              type="range"
-              min="0.1"
-              max="1"
-              step="0.01"
-              value={drawerExpandDuration()}
-              onInput={(event) => setDrawerExpandDuration(event.currentTarget.valueAsNumber)}
-              style={{ flex: 1 }}
-            />
-            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
-              {Math.round(drawerExpandDuration() * 1000)}ms
-            </span>
-          </label>
-          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
-            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
-              bounce
-            </span>
-            <input
-              type="range"
-              min="0"
-              max="1"
-              step="0.01"
-              value={drawerExpandBounce()}
-              onInput={(event) => setDrawerExpandBounce(event.currentTarget.valueAsNumber)}
-              style={{ flex: 1 }}
-            />
-            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
-              {drawerExpandBounce().toFixed(2)}
-            </span>
-          </label>
-
-          <div style={{ "font-size": "12px", color: "var(--color-text-secondary, #a3a3a3)", "margin-top": "4px" }}>
-            Drawer collapse
-          </div>
-          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
-            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
-              duration
-            </span>
-            <input
-              type="range"
-              min="0.1"
-              max="1"
-              step="0.01"
-              value={drawerCollapseDuration()}
-              onInput={(event) => setDrawerCollapseDuration(event.currentTarget.valueAsNumber)}
-              style={{ flex: 1 }}
-            />
-            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
-              {Math.round(drawerCollapseDuration() * 1000)}ms
-            </span>
-          </label>
-          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
-            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
-              bounce
-            </span>
-            <input
-              type="range"
-              min="0"
-              max="1"
-              step="0.01"
-              value={drawerCollapseBounce()}
-              onInput={(event) => setDrawerCollapseBounce(event.currentTarget.valueAsNumber)}
-              style={{ flex: 1 }}
-            />
-            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
-              {drawerCollapseBounce().toFixed(2)}
-            </span>
-          </label>
-
-          <div style={{ "font-size": "12px", color: "var(--color-text-secondary, #a3a3a3)", "margin-top": "4px" }}>
-            Subtitle odometer
-          </div>
-          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
-            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
-              duration
-            </span>
-            <input
-              type="range"
-              min="120"
-              max="1400"
-              step="10"
-              value={subtitleDuration()}
-              onInput={(event) => setSubtitleDuration(event.currentTarget.valueAsNumber)}
-              style={{ flex: 1 }}
-            />
-            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
-              {Math.round(subtitleDuration())}ms
-            </span>
-          </label>
-          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
-            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
-              auto fit
-            </span>
-            <input
-              type="checkbox"
-              checked={subtitleAuto()}
-              onInput={(event) => setSubtitleAuto(event.currentTarget.checked)}
-            />
-            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
-              {subtitleAuto() ? "on" : "off"}
-            </span>
-          </label>
-          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
-            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
-              travel
-            </span>
-            <input
-              type="range"
-              min="0"
-              max="40"
-              step="1"
-              value={subtitleTravel()}
-              onInput={(event) => setSubtitleTravel(event.currentTarget.valueAsNumber)}
-              style={{ flex: 1 }}
-            />
-            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>{subtitleTravel()}px</span>
-          </label>
-          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
-            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
-              edge
-            </span>
-            <input
-              type="range"
-              min="1"
-              max="40"
-              step="1"
-              value={subtitleEdge()}
-              onInput={(event) => setSubtitleEdge(event.currentTarget.valueAsNumber)}
-              style={{ flex: 1 }}
-            />
-            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>{subtitleEdge()}%</span>
-          </label>
-
-          <div style={{ "font-size": "12px", color: "var(--color-text-secondary, #a3a3a3)", "margin-top": "4px" }}>
-            Count odometer
-          </div>
-          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
-            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
-              duration
-            </span>
-            <input
-              type="range"
-              min="120"
-              max="1400"
-              step="10"
-              value={countDuration()}
-              onInput={(event) => setCountDuration(event.currentTarget.valueAsNumber)}
-              style={{ flex: 1 }}
-            />
-            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
-              {Math.round(countDuration())}ms
-            </span>
-          </label>
-          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
-            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
-              mask
-            </span>
-            <input
-              type="range"
-              min="4"
-              max="40"
-              step="1"
-              value={countMask()}
-              onInput={(event) => setCountMask(event.currentTarget.valueAsNumber)}
-              style={{ flex: 1 }}
-            />
-            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>{countMask()}%</span>
-          </label>
-          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
-            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
-              mask height
-            </span>
-            <input
-              type="range"
-              min="0"
-              max="14"
-              step="1"
-              value={countMaskHeight()}
-              onInput={(event) => setCountMaskHeight(event.currentTarget.valueAsNumber)}
-              style={{ flex: 1 }}
-            />
-            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>{countMaskHeight()}px</span>
-          </label>
-          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
-            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
-              width spring
-            </span>
-            <input
-              type="range"
-              min="0"
-              max="1200"
-              step="10"
-              value={countWidthDuration()}
-              onInput={(event) => setCountWidthDuration(event.currentTarget.valueAsNumber)}
-              style={{ flex: 1 }}
-            />
-            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
-              {Math.round(countWidthDuration())}ms
-            </span>
-          </label>
         </div>
       </div>
     )

packages/ui/src/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from "./use-filtered-list"
 export * from "./create-auto-scroll"
+export * from "./use-element-height"

packages/ui/src/hooks/use-element-height.ts

@@ -0,0 +1,25 @@
+import { createEffect, createSignal, onCleanup, type Accessor } from "solid-js"
+
+/**
+ * Tracks an element's height via ResizeObserver.
+ * Returns a reactive signal that updates whenever the element resizes.
+ */
+export function useElementHeight(
+  ref: Accessor<HTMLElement | undefined> | (() => HTMLElement | undefined),
+  initial = 0,
+): Accessor<number> {
+  const [height, setHeight] = createSignal(initial)
+
+  createEffect(() => {
+    const el = ref()
+    if (!el) return
+    setHeight(el.getBoundingClientRect().height)
+    const observer = new ResizeObserver(() => {
+      setHeight(el.getBoundingClientRect().height)
+    })
+    observer.observe(el)
+    onCleanup(() => observer.disconnect())
+  })
+
+  return height
+}