@opencode-ai/ui 0.0.0-beta-202606251302

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-shimmer.css

@@ -0,0 +1,119 @@
+[data-component="text-shimmer"] {
+  --text-shimmer-step: 45ms;
+  --text-shimmer-duration: 1200ms;
+  --text-shimmer-swap: 220ms;
+  --text-shimmer-index: 0;
+  --text-shimmer-angle: 90deg;
+  --text-shimmer-spread: 5.2ch;
+  --text-shimmer-size: 360%;
+  --text-shimmer-base-color: var(--text-weak);
+  --text-shimmer-peak-color: var(--text-strong);
+  --text-shimmer-sweep: linear-gradient(
+    var(--text-shimmer-angle),
+    transparent calc(50% - var(--text-shimmer-spread)),
+    var(--text-shimmer-peak-color) 50%,
+    transparent calc(50% + var(--text-shimmer-spread))
+  );
+  --text-shimmer-base: linear-gradient(var(--text-shimmer-base-color), var(--text-shimmer-base-color));
+
+  display: inline-flex;
+  align-items: baseline;
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+}
+
+[data-component="text-shimmer"] [data-slot="text-shimmer-char"] {
+  display: inline-grid;
+  white-space: pre;
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+}
+
+[data-component="text-shimmer"] [data-slot="text-shimmer-char-base"],
+[data-component="text-shimmer"] [data-slot="text-shimmer-char-shimmer"] {
+  grid-area: 1 / 1;
+  white-space: pre;
+  transition: opacity var(--text-shimmer-swap) ease-out;
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+}
+
+[data-component="text-shimmer"] [data-slot="text-shimmer-char-base"] {
+  color: inherit;
+  opacity: 1;
+}
+
+[data-component="text-shimmer"] [data-slot="text-shimmer-char-shimmer"] {
+  color: var(--text-weaker);
+  opacity: 0;
+}
+
+[data-component="text-shimmer"][data-active="true"] [data-slot="text-shimmer-char-shimmer"] {
+  opacity: 1;
+}
+
+[data-component="text-shimmer"] [data-slot="text-shimmer-char-shimmer"][data-run="true"] {
+  animation-name: text-shimmer-sweep;
+  animation-duration: var(--text-shimmer-duration);
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  animation-fill-mode: both;
+  animation-delay: calc(var(--text-shimmer-step) * var(--text-shimmer-index) * -1);
+  will-change: background-position;
+}
+
+@keyframes text-shimmer-sweep {
+  0% {
+    background-position:
+      100% 0,
+      0 0;
+  }
+
+  100% {
+    background-position:
+      0% 0,
+      0 0;
+  }
+}
+
+@supports ((-webkit-background-clip: text) or (background-clip: text)) {
+  [data-component="text-shimmer"] [data-slot="text-shimmer-char-shimmer"] {
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+    background-image: var(--text-shimmer-sweep), var(--text-shimmer-base);
+    background-size:
+      var(--text-shimmer-size) 100%,
+      100% 100%;
+    background-position:
+      100% 0,
+      0 0;
+    background-repeat: no-repeat;
+    -webkit-background-clip: text;
+    background-clip: text;
+  }
+
+  [data-component="text-shimmer"][data-active="true"] [data-slot="text-shimmer-char-base"] {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-component="text-shimmer"] [data-slot="text-shimmer-char-base"],
+  [data-component="text-shimmer"] [data-slot="text-shimmer-char-shimmer"] {
+    transition-duration: 0ms;
+  }
+
+  [data-component="text-shimmer"] [data-slot="text-shimmer-char-shimmer"] {
+    animation: none !important;
+    color: inherit;
+    -webkit-text-fill-color: currentColor;
+    background-image: none;
+  }
+
+  [data-component="text-shimmer"] [data-slot="text-shimmer-char-base"] {
+    opacity: 1 !important;
+  }
+}

package/src/components/text-shimmer.tsx

@@ -0,0 +1,62 @@
+import { createEffect, createMemo, createSignal, onCleanup, type ValidComponent } from "solid-js"
+import { Dynamic } from "solid-js/web"
+
+export const TextShimmer = <T extends ValidComponent = "span">(props: {
+  text: string
+  class?: string
+  as?: T
+  active?: boolean
+  offset?: number
+}) => {
+  const text = createMemo(() => props.text ?? "")
+  const active = createMemo(() => props.active ?? true)
+  const offset = createMemo(() => props.offset ?? 0)
+  const [run, setRun] = createSignal(active())
+  const swap = 220
+  let timer: ReturnType<typeof setTimeout> | undefined
+
+  createEffect(() => {
+    if (timer) {
+      clearTimeout(timer)
+      timer = undefined
+    }
+
+    if (active()) {
+      setRun(true)
+      return
+    }
+
+    timer = setTimeout(() => {
+      timer = undefined
+      setRun(false)
+    }, swap)
+  })
+
+  onCleanup(() => {
+    if (!timer) return
+    clearTimeout(timer)
+  })
+
+  return (
+    <Dynamic
+      component={props.as ?? "span"}
+      data-component="text-shimmer"
+      data-active={active() ? "true" : "false"}
+      class={props.class}
+      aria-label={text()}
+      style={{
+        "--text-shimmer-swap": `${swap}ms`,
+        "--text-shimmer-index": `${offset()}`,
+      }}
+    >
+      <span data-slot="text-shimmer-char">
+        <span data-slot="text-shimmer-char-base" aria-hidden="true">
+          {text()}
+        </span>
+        <span data-slot="text-shimmer-char-shimmer" data-run={run() ? "true" : "false"} aria-hidden="true">
+          {text()}
+        </span>
+      </span>
+    </Dynamic>
+  )
+}

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/toast.css

@@ -0,0 +1,236 @@
+[data-component="toast-region"] {
+  position: fixed;
+  bottom: 48px;
+  right: 32px;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-width: min(400px, calc(100vw - 64px));
+  max-height: calc(100dvh - 96px);
+  width: 100%;
+  overflow: hidden;
+  pointer-events: none;
+
+  [data-slot="toast-list"] {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    max-height: 100%;
+    overflow-y: auto;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+
+[data-component="toast"] {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
+  padding: 16px 20px;
+  max-height: min(420px, calc(100dvh - 96px));
+  overflow: hidden;
+  pointer-events: auto;
+  transition: all 150ms ease-out;
+
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border-weak-base);
+  background: var(--surface-float-base);
+  color: var(--text-invert-base);
+  box-shadow: var(--shadow-md);
+
+  [data-slot="toast-inner"] {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  &[data-opened] {
+    animation: toastPopIn 150ms ease-out;
+  }
+
+  &[data-closed] {
+    animation: toastPopOut 100ms ease-in forwards;
+  }
+
+  &[data-swipe="move"] {
+    transform: translateX(var(--kb-toast-swipe-move-x));
+  }
+
+  &[data-swipe="cancel"] {
+    transform: translateX(0);
+    transition: transform 200ms ease-out;
+  }
+
+  &[data-swipe="end"] {
+    animation: toastSwipeOut 100ms ease-out forwards;
+  }
+
+  /* &[data-variant="success"] { */
+  /*   border-color: var(--color-semantic-positive); */
+  /* } */
+  /**/
+  /* &[data-variant="error"] { */
+  /*   border-color: var(--color-semantic-danger); */
+  /* } */
+  /**/
+  /* &[data-variant="loading"] { */
+  /*   border-color: var(--color-semantic-info); */
+  /* } */
+
+  [data-slot="toast-icon"] {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    [data-component="icon"] {
+      color: var(--text-invert-stronger);
+      /* color: var(--icon-invert-base); */
+    }
+  }
+
+  [data-slot="toast-content"] {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-height: 0;
+    min-width: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  [data-slot="toast-title"] {
+    color: var(--text-invert-strong);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    /* text-14-medium */
+    font-family: var(--font-family-sans);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large); /* 142.857% */
+    letter-spacing: var(--letter-spacing-normal);
+
+    margin: 0;
+  }
+
+  [data-slot="toast-description"] {
+    color: var(--text-invert-base);
+    text-wrap-style: pretty;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+
+    /* text-14-regular */
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-base);
+    font-style: normal;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-x-large); /* 171.429% */
+    letter-spacing: var(--letter-spacing-normal);
+
+    margin: 0;
+  }
+
+  [data-slot="toast-actions"] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    margin-top: 8px;
+  }
+
+  [data-slot="toast-action"] {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    color: var(--text-invert-weak);
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &:first-child {
+      color: var(--text-invert-strong);
+    }
+  }
+
+  [data-slot="toast-close-button"] {
+    flex-shrink: 0;
+  }
+
+  [data-slot="toast-progress-track"] {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background-color: var(--surface-base);
+    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+    overflow: hidden;
+  }
+
+  [data-slot="toast-progress-fill"] {
+    height: 100%;
+    width: var(--kb-toast-progress-fill-width);
+    background-color: var(--color-primary);
+    transition: width 250ms linear;
+  }
+}
+
+@keyframes toastPopIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes toastPopOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+}
+
+@keyframes toastSwipeOut {
+  from {
+    transform: translateX(var(--kb-toast-swipe-end-x));
+  }
+  to {
+    transform: translateX(100%);
+  }
+}