summaryrefslogtreecommitdiffhomepage
path: root/packages/ui/src
diff options
context:
space:
mode:
authoropencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com>2026-03-02 22:25:39 +0000
committeropencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com>2026-03-02 22:25:39 +0000
commitb5dc6e670a02775a744c9ae70ebda7e958edc3c5 (patch)
treeb3e785bbf0b1655270dd888261bf17602544debc /packages/ui/src
parent9d7852b5c39b64b96fe1bc14a80a344a0667f0b7 (diff)
downloadopencode-b5dc6e670a02775a744c9ae70ebda7e958edc3c5.tar.gz
opencode-b5dc6e670a02775a744c9ae70ebda7e958edc3c5.zip
chore: generate
Diffstat (limited to 'packages/ui/src')
-rw-r--r--packages/ui/src/components/text-reveal.css10
-rw-r--r--packages/ui/src/components/text-reveal.stories.tsx82
-rw-r--r--packages/ui/src/components/tool-status-title.tsx7
3 files changed, 81 insertions, 18 deletions
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()