chore: generate

packages/app/src/components/prompt-input.tsx

@@ -256,10 +256,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     pendingAutoAccept: false,
   })
 
-  const buttonsSpring = useSpring(
+  const buttonsSpring = useSpring(() => (store.mode === "normal" ? 1 : 0), { visualDuration: 0.2, bounce: 0 })
-    () => (store.mode === "normal" ? 1 : 0),
-    { visualDuration: 0.2, bounce: 0 },
-  )
 
   const commentCount = createMemo(() => {
     if (store.mode === "shell") return 0

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

@@ -73,10 +73,7 @@ export function SessionComposerRegion(props: {
           bounce: props.dockCloseBounce ?? props.bounce ?? 0,
         },
   )
-  const progress = useSpring(
+  const progress = useSpring(() => (open() ? 1 : 0), config)
-    () => (open() ? 1 : 0),
-    config,
-  )
   const value = createMemo(() => Math.max(0, Math.min(1, progress())))
   const [height, setHeight] = createSignal(320)
   const dock = createMemo(() => props.state.dock() || value() > 0.001)

packages/app/src/pages/session/composer/session-composer-state.ts

@@ -29,11 +29,7 @@ export function createSessionComposerBlocked() {
   })
 }
 
-export function createSessionComposerState(
+export function createSessionComposerState(options?: { closeMs?: number | (() => number) }) {
-  options?: {
-    closeMs?: number | (() => number)
-  },
-) {
   const params = useParams()
   const sdk = useSDK()
   const sync = useSync()

packages/ui/src/components/text-reveal.css

@@ -67,7 +67,10 @@
     -webkit-mask-image: linear-gradient(to top, white 33%, transparent calc(33% + var(--_edge)));
     mask-position: 0 100%;
     -webkit-mask-position: 0 100%;
-    transition-property: mask-position, -webkit-mask-position, transform;
+    transition-property:
+      mask-position,
+      -webkit-mask-position,
+      transform;
     transform: translateY(0);
   }
 
@@ -82,7 +85,10 @@
     -webkit-mask-image: linear-gradient(to bottom, white 33%, transparent calc(33% + var(--_edge)));
     mask-position: 0 100%;
     -webkit-mask-position: 0 100%;
-    transition-property: mask-position, -webkit-mask-position, transform;
+    transition-property:
+      mask-position,
+      -webkit-mask-position,
+      transform;
     transform: translateY(var(--_travel));
   }
 

packages/ui/src/components/text-reveal.stories.tsx

@@ -179,8 +179,12 @@ export const Playground = {
         </div>
 
         <div style={{ display: "flex", gap: "8px", "flex-wrap": "wrap" }}>
-          <button onClick={prev} style={btn()}>Prev</button>
+          <button onClick={prev} style={btn()}>
-          <button onClick={next} style={btn()}>Next</button>
+            Prev
+          </button>
+          <button onClick={next} style={btn()}>
+            Next
+          </button>
           <button onClick={toggleCycle} style={btn(cycling())}>
             {cycling() ? "Stop cycle" : "Auto cycle"}
           </button>
@@ -194,13 +198,29 @@ export const Playground = {
 
           <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
             <span style={sliderLabel}>edge</span>
-            <input type="range" min="1" max="40" step="1" value={hybridEdge()} onInput={(e) => setHybridEdge(e.currentTarget.valueAsNumber)} style={{ flex: 1 }} />
+            <input
+              type="range"
+              min="1"
+              max="40"
+              step="1"
+              value={hybridEdge()}
+              onInput={(e) => setHybridEdge(e.currentTarget.valueAsNumber)}
+              style={{ flex: 1 }}
+            />
             <span style={{ width: "60px", "text-align": "right", "font-size": "12px" }}>{hybridEdge()}%</span>
           </label>
 
           <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
             <span style={sliderLabel}>travel</span>
-            <input type="range" min="0" max="40" step="1" value={hybridTravel()} onInput={(e) => setHybridTravel(e.currentTarget.valueAsNumber)} style={{ flex: 1 }} />
+            <input
+              type="range"
+              min="0"
+              max="40"
+              step="1"
+              value={hybridTravel()}
+              onInput={(e) => setHybridTravel(e.currentTarget.valueAsNumber)}
+              style={{ flex: 1 }}
+            />
             <span style={{ width: "60px", "text-align": "right", "font-size": "12px" }}>{hybridTravel()}px</span>
           </label>
 
@@ -208,33 +228,75 @@ export const Playground = {
 
           <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
             <span style={sliderLabel}>duration</span>
-            <input type="range" min="100" max="1400" step="10" value={duration()} onInput={(e) => setDuration(e.currentTarget.valueAsNumber)} style={{ flex: 1 }} />
+            <input
+              type="range"
+              min="100"
+              max="1400"
+              step="10"
+              value={duration()}
+              onInput={(e) => setDuration(e.currentTarget.valueAsNumber)}
+              style={{ flex: 1 }}
+            />
             <span style={{ width: "60px", "text-align": "right", "font-size": "12px" }}>{duration()}ms</span>
           </label>
 
           <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
             <span style={sliderLabel}>bounce</span>
-            <input type="range" min="1" max="2" step="0.01" value={bounce()} onInput={(e) => setBounce(e.currentTarget.valueAsNumber)} style={{ flex: 1 }} />
+            <input
+              type="range"
+              min="1"
+              max="2"
+              step="0.01"
+              value={bounce()}
+              onInput={(e) => setBounce(e.currentTarget.valueAsNumber)}
+              style={{ flex: 1 }}
+            />
             <span style={{ width: "60px", "text-align": "right", "font-size": "12px" }}>{bounce().toFixed(2)}</span>
           </label>
 
           <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
             <span style={sliderLabel}>bounce soft</span>
-            <input type="range" min="1" max="1.5" step="0.01" value={bounceSoft()} onInput={(e) => setBounceSoft(e.currentTarget.valueAsNumber)} style={{ flex: 1 }} />
+            <input
+              type="range"
+              min="1"
+              max="1.5"
+              step="0.01"
+              value={bounceSoft()}
+              onInput={(e) => setBounceSoft(e.currentTarget.valueAsNumber)}
+              style={{ flex: 1 }}
+            />
             <span style={{ width: "60px", "text-align": "right", "font-size": "12px" }}>{bounceSoft().toFixed(2)}</span>
           </label>
 
-          <div style={{ "font-size": "11px", color: "var(--color-text-weak, #666)", "margin-top": "8px" }}>Wipe only</div>
+          <div style={{ "font-size": "11px", color: "var(--color-text-weak, #666)", "margin-top": "8px" }}>
+            Wipe only
+          </div>
 
           <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
             <span style={sliderLabel}>edge</span>
-            <input type="range" min="1" max="40" step="1" value={edge()} onInput={(e) => setEdge(e.currentTarget.valueAsNumber)} style={{ flex: 1 }} />
+            <input
+              type="range"
+              min="1"
+              max="40"
+              step="1"
+              value={edge()}
+              onInput={(e) => setEdge(e.currentTarget.valueAsNumber)}
+              style={{ flex: 1 }}
+            />
             <span style={{ width: "60px", "text-align": "right", "font-size": "12px" }}>{edge()}%</span>
           </label>
 
           <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
             <span style={sliderLabel}>travel</span>
-            <input type="range" min="0" max="16" step="1" value={revealTravel()} onInput={(e) => setRevealTravel(e.currentTarget.valueAsNumber)} style={{ flex: 1 }} />
+            <input
+              type="range"
+              min="0"
+              max="16"
+              step="1"
+              value={revealTravel()}
+              onInput={(e) => setRevealTravel(e.currentTarget.valueAsNumber)}
+              style={{ flex: 1 }}
+            />
             <span style={{ width: "60px", "text-align": "right", "font-size": "12px" }}>{revealTravel()}px</span>
           </label>
         </div>

packages/ui/src/components/tool-status-title.tsx

@@ -72,12 +72,7 @@ export function ToolStatusTitle(props: {
     })
   }
 
-  createEffect(
+  createEffect(on([() => props.active, activeTail, doneTail, suffix], () => schedule()))
-    on(
-      [() => props.active, activeTail, doneTail, suffix],
-      () => schedule(),
-    ),
-  )
 
   onMount(() => {
     measure()