diff options
6 files changed, 84 insertions, 31 deletions
diff --git a/packages/app/src/components/prompt-input.tsx b/packages/app/src/components/prompt-input.tsx index 89169af0d..c9c8bc6b4 100644 --- a/packages/app/src/components/prompt-input.tsx +++ b/packages/app/src/components/prompt-input.tsx @@ -256,10 +256,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => { pendingAutoAccept: false, }) - const buttonsSpring = useSpring( - () => (store.mode === "normal" ? 1 : 0), - { visualDuration: 0.2, bounce: 0 }, - ) + const buttonsSpring = useSpring(() => (store.mode === "normal" ? 1 : 0), { visualDuration: 0.2, bounce: 0 }) const commentCount = createMemo(() => { if (store.mode === "shell") return 0 diff --git a/packages/app/src/pages/session/composer/session-composer-region.tsx b/packages/app/src/pages/session/composer/session-composer-region.tsx index 9f17d3f4b..a882e25dd 100644 --- a/packages/app/src/pages/session/composer/session-composer-region.tsx +++ b/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( - () => (open() ? 1 : 0), - config, - ) + const progress = useSpring(() => (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) diff --git a/packages/app/src/pages/session/composer/session-composer-state.ts b/packages/app/src/pages/session/composer/session-composer-state.ts index 03e96463c..f70bc4bbd 100644 --- a/packages/app/src/pages/session/composer/session-composer-state.ts +++ b/packages/app/src/pages/session/composer/session-composer-state.ts @@ -29,11 +29,7 @@ export function createSessionComposerBlocked() { }) } -export function createSessionComposerState( - options?: { - closeMs?: number | (() => number) - }, -) { +export function createSessionComposerState(options?: { closeMs?: number | (() => number) }) { const params = useParams() const sdk = useSDK() const sync = useSync() diff --git a/packages/ui/src/components/text-reveal.css b/packages/ui/src/components/text-reveal.css index a9036f8da..f799962f0 100644 --- a/packages/ui/src/components/text-reveal.css +++ b/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)); } diff --git a/packages/ui/src/components/text-reveal.stories.tsx b/packages/ui/src/components/text-reveal.stories.tsx index f3da13f5d..df514ca38 100644 --- a/packages/ui/src/components/text-reveal.stories.tsx +++ b/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={next} style={btn()}>Next</button> + <button onClick={prev} style={btn()}> + 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> diff --git a/packages/ui/src/components/tool-status-title.tsx b/packages/ui/src/components/tool-status-title.tsx index 4cf8f15ab..68440b6c6 100644 --- a/packages/ui/src/components/tool-status-title.tsx +++ b/packages/ui/src/components/tool-status-title.tsx @@ -72,12 +72,7 @@ export function ToolStatusTitle(props: { }) } - createEffect( - on( - [() => props.active, activeTail, doneTail, suffix], - () => schedule(), - ), - ) + createEffect(on([() => props.active, activeTail, doneTail, suffix], () => schedule())) onMount(() => { measure() |