@opencode/ui 0.0.0-beta-19275

package/src/components/text-field.tsx

@@ -0,0 +1,136 @@
+import { TextField as Kobalte } from "@kobalte/core/text-field"
+import { createSignal, Show, splitProps } from "solid-js"
+import type { ComponentProps } from "solid-js"
+import { useI18n } from "../context/i18n"
+import { IconButton } from "@opencode/ui/icon-button"
+import { Icon } from "@opencode/ui/icon"
+import { Tooltip } from "@opencode/ui/tooltip"
+
+export interface TextFieldProps
+  extends ComponentProps<typeof Kobalte.Input>,
+    Partial<
+      Pick<
+        ComponentProps<typeof Kobalte>,
+        | "name"
+        | "defaultValue"
+        | "value"
+        | "onChange"
+        | "onKeyDown"
+        | "validationState"
+        | "required"
+        | "disabled"
+        | "readOnly"
+      >
+    > {
+  label?: string
+  hideLabel?: boolean
+  description?: string
+  error?: string
+  variant?: "normal" | "ghost"
+  copyable?: boolean
+  copyKind?: "clipboard" | "link"
+  multiline?: boolean
+}
+
+export function TextField(props: TextFieldProps) {
+  const i18n = useI18n()
+  const [local, others] = splitProps(props, [
+    "name",
+    "defaultValue",
+    "value",
+    "onChange",
+    "onKeyDown",
+    "validationState",
+    "required",
+    "disabled",
+    "readOnly",
+    "class",
+    "label",
+    "hideLabel",
+    "description",
+    "error",
+    "variant",
+    "copyable",
+    "copyKind",
+    "multiline",
+  ])
+  const [copied, setCopied] = createSignal(false)
+
+  const label = () => {
+    if (copied()) return i18n.t("ui.textField.copied")
+    if (local.copyKind === "link") return i18n.t("ui.textField.copyLink")
+    return i18n.t("ui.textField.copyToClipboard")
+  }
+
+  const icon = () => {
+    if (copied()) return "check"
+    if (local.copyKind === "link") return "link"
+    return "copy"
+  }
+
+  async function handleCopy() {
+    const value = local.value ?? local.defaultValue ?? ""
+    await navigator.clipboard.writeText(value)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  function handleClick() {
+    if (local.copyable) void handleCopy()
+  }
+
+  return (
+    <Kobalte
+      data-component="input"
+      data-variant={local.variant || "normal"}
+      name={local.name}
+      defaultValue={local.defaultValue}
+      value={local.value}
+      onChange={local.onChange}
+      onKeyDown={local.onKeyDown}
+      onClick={handleClick}
+      required={local.required}
+      disabled={local.disabled}
+      readOnly={local.readOnly}
+      validationState={local.validationState}
+    >
+      <Show when={local.label}>
+        <Kobalte.Label data-slot="input-label" classList={{ "sr-only": local.hideLabel }}>
+          {local.label}
+        </Kobalte.Label>
+      </Show>
+      <div data-slot="input-wrapper">
+        <Show
+          when={local.multiline}
+          fallback={<Kobalte.Input {...others} data-slot="input-input" class={local.class} />}
+        >
+          <Kobalte.TextArea {...others} autoResize data-slot="input-input" class={local.class} />
+        </Show>
+        <Show when={local.copyable}>
+          <Tooltip
+            appearance="standard"
+            value={label()}
+            placement="top"
+            gutter={4}
+            forceOpen={copied() ? true : undefined}
+            skipDelayDuration={0}
+          >
+            <IconButton
+              type="button"
+              icon={<Icon name={icon()} />}
+              variant="ghost"
+              onClick={handleCopy}
+              tabIndex={-1}
+              data-slot="input-copy-button"
+              aria-label={label()}
+            />
+          </Tooltip>
+        </Show>
+      </div>
+      <Show when={local.description}>
+        <Kobalte.Description data-slot="input-description">{local.description}</Kobalte.Description>
+      </Show>
+      <Kobalte.ErrorMessage data-slot="input-error">{local.error}</Kobalte.ErrorMessage>
+    </Kobalte>
+  )
+}

package/src/components/text-reveal.css

@@ -0,0 +1,150 @@
+/*
+ * TextReveal — mask-position wipe animation
+ *
+ * Instead of sliding text through a fixed mask (odometer style),
+ * the mask itself sweeps across each span to reveal/hide text.
+ *
+ * Direction: top-to-bottom. New text drops in from above, old text exits downward.
+ *
+ * Entering: gradient reveals top-to-bottom (top of text appears first).
+ *   gradient(to bottom, white 33%, transparent 33%+edge)
+ *   pos 0 100% = transparent covers element = hidden
+ *   pos 0 0%   = white covers element       = visible
+ *
+ * Leaving: gradient hides top-to-bottom (top of text disappears first).
+ *   gradient(to top, white 33%, transparent 33%+edge)
+ *   pos 0 100% = white covers element       = visible
+ *   pos 0 0%   = transparent covers element = hidden
+ *
+ * Both transition from 0 100% (swap) → 0 0% (settled).
+ */
+
+[data-component="text-reveal"] {
+  --_edge: var(--text-reveal-edge, 17%);
+  --_dur: var(--text-reveal-duration, 450ms);
+  --_spring: var(--text-reveal-spring, cubic-bezier(0.34, 1.08, 0.64, 1));
+  --_spring-soft: var(--text-reveal-spring-soft, cubic-bezier(0.34, 1, 0.64, 1));
+  --_travel: var(--text-reveal-travel, 0px);
+
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  overflow: visible;
+
+  [data-slot="text-reveal-track"] {
+    display: grid;
+    min-height: 20px;
+    line-height: 20px;
+    justify-items: start;
+    align-items: center;
+    overflow: visible;
+    transition: width var(--_dur) var(--_spring-soft);
+  }
+
+  [data-slot="text-reveal-entering"],
+  [data-slot="text-reveal-leaving"] {
+    grid-area: 1 / 1;
+    line-height: 20px;
+    white-space: nowrap;
+    justify-self: start;
+    text-align: start;
+    mask-size: 100% 300%;
+    -webkit-mask-size: 100% 300%;
+    mask-repeat: no-repeat;
+    -webkit-mask-repeat: no-repeat;
+    transition-duration: var(--_dur);
+    transition-timing-function: var(--_spring);
+  }
+
+  /* ── entering: reveal top-to-bottom ──
+   * Gradient(to top): white at bottom, transparent at top of mask.
+   * Settled pos 0 100% = white covers element   = visible
+   * Swap    pos 0 0%   = transparent covers      = hidden
+   * Slides from above: translateY(-travel) → translateY(0)
+   */
+  [data-slot="text-reveal-entering"] {
+    mask-image: linear-gradient(to top, white 33%, transparent calc(33% + var(--_edge)));
+    -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;
+    transform: translateY(0);
+  }
+
+  /* ── leaving: hide top-to-bottom + slide downward ──
+   * Gradient(to bottom): white at top, transparent at bottom of mask.
+   * Swap    pos 0 0%   = white covers element   = visible
+   * Settled pos 0 100% = transparent covers      = hidden
+   * Slides down: translateY(0) → translateY(travel)
+   */
+  [data-slot="text-reveal-leaving"] {
+    mask-image: linear-gradient(to bottom, white 33%, transparent calc(33% + var(--_edge)));
+    -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;
+    transform: translateY(var(--_travel));
+  }
+
+  /* ── swapping: instant reset ──
+   * Snap entering to hidden (above), leaving to visible (center).
+   */
+  &[data-swapping="true"] [data-slot="text-reveal-entering"] {
+    mask-position: 0 0%;
+    -webkit-mask-position: 0 0%;
+    transform: translateY(calc(var(--_travel) * -1));
+    transition-duration: 0ms !important;
+  }
+
+  &[data-swapping="true"] [data-slot="text-reveal-leaving"] {
+    mask-position: 0 0%;
+    -webkit-mask-position: 0 0%;
+    transform: translateY(0);
+    transition-duration: 0ms !important;
+  }
+
+  /* ── not ready: kill all transitions ── */
+  &[data-ready="false"] [data-slot="text-reveal-track"] {
+    transition-duration: 0ms !important;
+  }
+
+  &[data-ready="false"] [data-slot="text-reveal-entering"],
+  &[data-ready="false"] [data-slot="text-reveal-leaving"] {
+    transition-duration: 0ms !important;
+  }
+
+  &[data-truncate="true"] {
+    width: 100%;
+  }
+
+  &[data-truncate="true"] [data-slot="text-reveal-track"] {
+    width: 100%;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  &[data-truncate="true"] [data-slot="text-reveal-entering"],
+  &[data-truncate="true"] [data-slot="text-reveal-leaving"] {
+    min-width: 0;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-component="text-reveal"] [data-slot="text-reveal-track"] {
+    transition-duration: 0ms !important;
+  }
+
+  [data-component="text-reveal"] [data-slot="text-reveal-entering"],
+  [data-component="text-reveal"] [data-slot="text-reveal-leaving"] {
+    transition-duration: 0ms !important;
+  }
+}

package/src/components/text-reveal.tsx

@@ -0,0 +1,143 @@
+import { createEffect, on, onCleanup, onMount } from "solid-js"
+import { createStore } from "solid-js/store"
+
+const px = (value: number | string | undefined, fallback: number) => {
+  if (typeof value === "number") return `${value}px`
+  if (typeof value === "string") return value
+  return `${fallback}px`
+}
+
+const ms = (value: number | string | undefined, fallback: number) => {
+  if (typeof value === "number") return `${value}ms`
+  if (typeof value === "string") return value
+  return `${fallback}ms`
+}
+
+const pct = (value: number | undefined, fallback: number) => {
+  const v = value ?? fallback
+  return `${v}%`
+}
+
+export function TextReveal(props: {
+  text?: string
+  class?: string
+  duration?: number | string
+  /** Gradient edge softness as a percentage of the mask (0 = hard wipe, 17 = soft). */
+  edge?: number
+  /** Optional small vertical travel for entering text (px). Default 0. */
+  travel?: number | string
+  spring?: string
+  springSoft?: string
+  growOnly?: boolean
+  truncate?: boolean
+}) {
+  const [state, setState] = createStore({
+    cur: props.text,
+    old: undefined as string | undefined,
+    width: "auto",
+    ready: false,
+    swapping: false,
+  })
+  const cur = () => state.cur
+  const old = () => state.old
+  const width = () => state.width
+  const ready = () => state.ready
+  const swapping = () => state.swapping
+  let inRef: HTMLSpanElement | undefined
+  let outRef: HTMLSpanElement | undefined
+  let rootRef: HTMLSpanElement | undefined
+  let frame: number | undefined
+
+  const win = () => inRef?.scrollWidth ?? 0
+  const wout = () => outRef?.scrollWidth ?? 0
+
+  const widen = (next: number) => {
+    if (next <= 0) return
+    if (props.growOnly ?? true) {
+      const prev = Number.parseFloat(width())
+      if (Number.isFinite(prev) && next <= prev) return
+    }
+    setState("width", `${next}px`)
+  }
+
+  createEffect(
+    on(
+      () => props.text,
+      (next, prev) => {
+        if (next === prev) return
+        if (typeof next === "string" && typeof prev === "string" && next.startsWith(prev)) {
+          setState("cur", next)
+          widen(win())
+          return
+        }
+        setState("swapping", true)
+        setState("old", prev)
+        setState("cur", next)
+
+        if (typeof requestAnimationFrame !== "function") {
+          widen(Math.max(win(), wout()))
+          rootRef?.offsetHeight
+          setState("swapping", false)
+          return
+        }
+        if (frame !== undefined && typeof cancelAnimationFrame === "function") cancelAnimationFrame(frame)
+        frame = requestAnimationFrame(() => {
+          widen(Math.max(win(), wout()))
+          rootRef?.offsetHeight
+          setState("swapping", false)
+          frame = undefined
+        })
+      },
+    ),
+  )
+
+  onMount(() => {
+    widen(win())
+    const fonts = typeof document !== "undefined" ? document.fonts : undefined
+    if (typeof requestAnimationFrame !== "function") {
+      setState("ready", true)
+      return
+    }
+    if (!fonts) {
+      requestAnimationFrame(() => setState("ready", true))
+      return
+    }
+    void fonts.ready.finally(() => {
+      widen(win())
+      requestAnimationFrame(() => setState("ready", true))
+    })
+  })
+
+  onCleanup(() => {
+    if (frame === undefined || typeof cancelAnimationFrame !== "function") return
+    cancelAnimationFrame(frame)
+  })
+
+  return (
+    <span
+      ref={rootRef}
+      data-component="text-reveal"
+      data-ready={ready() ? "true" : "false"}
+      data-swapping={swapping() ? "true" : "false"}
+      data-truncate={props.truncate ? "true" : "false"}
+      class={props.class}
+      aria-label={props.text ?? ""}
+      style={{
+        "--text-reveal-duration": ms(props.duration, 450),
+        "--text-reveal-edge": pct(props.edge, 17),
+        "--text-reveal-travel": px(props.travel, 0),
+        "--text-reveal-spring": props.spring ?? "cubic-bezier(0.34, 1.08, 0.64, 1)",
+        "--text-reveal-spring-soft": props.springSoft ?? "cubic-bezier(0.34, 1, 0.64, 1)",
+      }}
+    >
+      <span data-slot="text-reveal-track" style={{ width: props.truncate ? "100%" : width() }}>
+        <span data-slot="text-reveal-entering" ref={inRef}>
+          {cur() ?? "\u00A0"}
+        </span>
+        <span data-slot="text-reveal-leaving" ref={outRef}>
+          {old() ?? "\u00A0"}
+        </span>
+      </span>
+    </span>
+  )
+}

package/src/components/text-strikethrough.css

@@ -0,0 +1,27 @@
+/*
+ * TextStrikethrough — spring-animated strikethrough line
+ *
+ * Draws a line-through from left to right using clip-path on a
+ * transparent-text overlay that carries the text-decoration.
+ * Grid stacking (grid-area: 1/1) layers the overlay on the base text.
+ *
+ * Key trick: -webkit-text-fill-color hides the glyph paint while
+ * keeping `color` (and therefore `currentColor` / text-decoration-color)
+ * set to the real inherited text color.
+ */
+
+[data-component="text-strikethrough"] {
+  display: grid;
+}
+
+[data-slot="text-strikethrough-line"] {
+  -webkit-text-fill-color: transparent;
+  text-decoration-line: line-through;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="text-strikethrough-line"] {
+    clip-path: none !important;
+  }
+}

package/src/components/text-strikethrough.tsx

@@ -0,0 +1,84 @@
+import type { JSX } from "solid-js"
+import { onMount } from "solid-js"
+import { createResizeObserver } from "@solid-primitives/resize-observer"
+import { createStore } from "solid-js/store"
+import { useSpring } from "./motion-spring"
+
+export function TextStrikethrough(props: {
+  /** Whether the strikethrough is active (line drawn across). */
+  active: boolean
+  /** The text to display. Rendered twice internally (base + decoration overlay). */
+  text: string
+  /** Spring visual duration in seconds. Default 0.35. */
+  visualDuration?: number
+  class?: string
+  style?: JSX.CSSProperties
+}) {
+  const progress = useSpring(
+    () => (props.active ? 1 : 0),
+    () => ({ visualDuration: props.visualDuration ?? 0.35, bounce: 0 }),
+  )
+
+  let baseRef: HTMLSpanElement | undefined
+  let containerRef: HTMLSpanElement | undefined
+  const [state, setState] = createStore({
+    textWidth: 0,
+    containerWidth: 0,
+  })
+  const textWidth = () => state.textWidth
+  const containerWidth = () => state.containerWidth
+
+  const measure = () => {
+    if (baseRef) setState("textWidth", baseRef.scrollWidth)
+    if (containerRef) setState("containerWidth", containerRef.offsetWidth)
+  }
+
+  onMount(measure)
+  createResizeObserver(() => containerRef, measure)
+
+  // Revealed pixels from left = progress * textWidth
+  const revealedPx = () => {
+    const tw = textWidth()
+    return tw > 0 ? progress() * tw : 0
+  }
+
+  // Overlay clip: hide everything to the right of revealed area
+  const overlayClip = () => {
+    const cw = containerWidth()
+    const tw = textWidth()
+    if (cw <= 0 || tw <= 0) return `inset(0 ${(1 - progress()) * 100}% 0 0)`
+    const remaining = Math.max(0, cw - revealedPx())
+    return `inset(0 ${remaining}px 0 0)`
+  }
+
+  // Base clip: hide everything to the left of revealed area (complementary)
+  const baseClip = () => {
+    const px = revealedPx()
+    if (px <= 0.5) return "none"
+    return `inset(0 0 0 ${px}px)`
+  }
+
+  return (
+    <span
+      data-component="text-strikethrough"
+      class={props.class}
+      style={{ display: "grid", ...props.style }}
+      ref={containerRef}
+    >
+      <span ref={baseRef} style={{ "grid-area": "1 / 1", "clip-path": baseClip() }}>
+        {props.text}
+      </span>
+      <span
+        aria-hidden="true"
+        style={{
+          "grid-area": "1 / 1",
+          "text-decoration": "line-through",
+          "pointer-events": "none",
+          "clip-path": overlayClip(),
+        }}
+      >
+        {props.text}
+      </span>
+    </span>
+  )
+}

package/src/components/typewriter.css

@@ -0,0 +1,14 @@
+@keyframes blink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+  51%,
+  100% {
+    opacity: 0;
+  }
+}
+
+.blinking-cursor {
+  animation: blink 1s step-end infinite;
+}

package/src/components/typewriter.tsx

@@ -0,0 +1,55 @@
+import { createEffect, onCleanup, Show, type ValidComponent } from "solid-js"
+import { createStore } from "solid-js/store"
+import { Dynamic } from "solid-js/web"
+
+export const Typewriter = <T extends ValidComponent = "p">(props: { text?: string; class?: string; as?: T }) => {
+  const [store, setStore] = createStore({
+    typing: false,
+    displayed: "",
+    cursor: true,
+  })
+
+  createEffect(() => {
+    const text = props.text
+    if (!text) return
+
+    let i = 0
+    const timeouts: ReturnType<typeof setTimeout>[] = []
+    setStore("typing", true)
+    setStore("displayed", "")
+    setStore("cursor", true)
+
+    const getTypingDelay = () => {
+      const random = Math.random()
+      if (random < 0.05) return 150 + Math.random() * 100
+      if (random < 0.15) return 80 + Math.random() * 60
+      return 30 + Math.random() * 50
+    }
+
+    const type = () => {
+      if (i < text.length) {
+        setStore("displayed", text.slice(0, i + 1))
+        i++
+        timeouts.push(setTimeout(type, getTypingDelay()))
+      } else {
+        setStore("typing", false)
+        timeouts.push(setTimeout(() => setStore("cursor", false), 2000))
+      }
+    }
+
+    timeouts.push(setTimeout(type, 200))
+
+    onCleanup(() => {
+      for (const timeout of timeouts) clearTimeout(timeout)
+    })
+  })
+
+  return (
+    <Dynamic component={props.as || "p"} class={props.class}>
+      {store.displayed}
+      <Show when={store.cursor}>
+        <span classList={{ "blinking-cursor": !store.typing }}>│</span>
+      </Show>
+    </Dynamic>
+  )
+}