@opencode/ui 0.0.0-reserved → 2.0.0

package/src/theme/v2/mapping.ts

@@ -0,0 +1,176 @@
+import type { V2ColorValue } from "../types"
+import { V2_AVATAR_DARK, V2_AVATAR_LIGHT } from "./avatar"
+
+const ref = (name: string): V2ColorValue => `var(--${name})`
+
+const lightAgentTokens: Record<string, V2ColorValue> = {
+  "v2-agent-plan-solid": ref("v2-pink-800"),
+  "v2-agent-plan-border": "rgba(200, 61, 139, 0.20)",
+  "v2-agent-plan-background": "rgba(253, 236, 243, 0.10)",
+  "v2-agent-build-solid": ref("v2-blue-800"),
+  "v2-agent-build-border": "rgba(44, 71, 200, 0.20)",
+  "v2-agent-build-background": "rgba(236, 241, 254, 0.10)",
+  "v2-agent-explore-solid": ref("v2-yellow-900"),
+  "v2-agent-explore-border": "rgba(203, 159, 52, 0.20)",
+  "v2-agent-explore-background": "rgba(254, 250, 236, 0.1)",
+  "v2-agent-review-solid": ref("v2-green-800"),
+  "v2-agent-writer-solid": ref("v2-purple-700"),
+}
+
+const darkAgentTokens: Record<string, V2ColorValue> = {
+  "v2-agent-plan-solid": ref("v2-pink-400"),
+  "v2-agent-plan-border": "rgba(247, 153, 198, 0.20)",
+  "v2-agent-plan-background": "rgba(170, 53, 118, 0.05)",
+  "v2-agent-build-solid": ref("v2-blue-300"),
+  "v2-agent-build-border": "rgba(162, 188, 255, 0.20)",
+  "v2-agent-build-background": "rgba(38, 63, 169, 0.05)",
+  "v2-agent-explore-solid": ref("v2-yellow-300"),
+  "v2-agent-explore-border": "rgba(243, 218, 155, 0.20)",
+  "v2-agent-explore-background": "rgba(172, 136, 51, 0.05)",
+  "v2-agent-review-solid": ref("v2-green-300"),
+  "v2-agent-writer-solid": ref("v2-purple-400"),
+}
+
+const light: Record<string, V2ColorValue> = {
+  "v2-background-bg-base": ref("v2-grey-100"),
+  "v2-background-bg-deep": ref("v2-grey-200"),
+  "v2-background-bg-layer-01": ref("v2-grey-300"),
+  "v2-background-bg-layer-02": ref("v2-grey-400"),
+  "v2-background-bg-layer-03": ref("v2-grey-500"),
+  "v2-background-bg-layer-04": ref("v2-grey-600"),
+  "v2-background-bg-inverse": ref("v2-grey-1000"),
+  "v2-background-bg-contrast": ref("v2-grey-900"),
+  "v2-background-bg-icon-button-contrast": ref("v2-background-bg-contrast"),
+  "v2-background-bg-button-neutral": ref("v2-grey-100"),
+  "v2-background-bg-accent": ref("v2-blue-600"),
+  "v2-background-bg-code-path": ref("v2-cyan-100"),
+  "v2-text-text-inverse": ref("v2-grey-100"),
+  "v2-text-text-contrast": ref("v2-grey-100"),
+  "v2-text-text-accent": ref("v2-blue-600"),
+  "v2-text-text-accent-hover": ref("v2-blue-700"),
+  "v2-text-text-code-accent": ref("v2-blue-900"),
+  "v2-text-text-code-path": ref("v2-blue-900"),
+  "v2-border-border-muted": ref("v2-alpha-dark-8"),
+  "v2-border-border-base": ref("v2-alpha-dark-10"),
+  "v2-border-border-strong": ref("v2-alpha-dark-20"),
+  "v2-border-border-inverse": ref("v2-grey-1000"),
+  "v2-border-border-focus": ref("v2-blue-500"),
+  "v2-overlay-simple-overlay-hover": ref("v2-alpha-dark-4"),
+  "v2-overlay-simple-overlay-pressed": ref("v2-alpha-dark-8"),
+  "v2-overlay-simple-overlay-contrast-hover": ref("v2-alpha-light-12"),
+  "v2-overlay-simple-overlay-contrast-pressed": ref("v2-alpha-light-24"),
+  "v2-overlay-simple-overlay-scrim": ref("v2-alpha-dark-40"),
+  "v2-overlay-gradient-depth-overlay-depth-top": ref("v2-alpha-light-100"),
+  "v2-overlay-gradient-depth-overlay-depth-bot": ref("v2-alpha-light-0"),
+  "v2-overlay-simple-tab-active-scrim": "#fafafa00",
+  "v2-overlay-simple-tab-hover-scrim": "#eeeeee00",
+  "v2-overlay-simple-tab-scrim": "#fafafa00",
+  "v2-state-bg-success": ref("v2-green-100"),
+  "v2-state-fg-success": ref("v2-green-800"),
+  "v2-state-border-success": ref("v2-green-300"),
+  "v2-state-bg-warning": ref("v2-yellow-100"),
+  "v2-state-fg-warning": ref("v2-yellow-800"),
+  "v2-state-border-warning": ref("v2-yellow-300"),
+  "v2-state-bg-danger": ref("v2-red-100"),
+  "v2-state-fg-danger": ref("v2-red-800"),
+  "v2-state-border-danger": ref("v2-red-300"),
+  "v2-state-bg-info": ref("v2-blue-200"),
+  "v2-state-fg-info": ref("v2-blue-800"),
+  "v2-state-border-info": ref("v2-blue-300"),
+  ...lightAgentTokens,
+  ...V2_AVATAR_LIGHT,
+  "v2-elevation-raised":
+    "0px 2px 4px 0px var(--v2-alpha-dark-4), 0px 1px 2px -1px var(--v2-alpha-dark-8), 0px 0px 0px 0.5px var(--v2-alpha-dark-12), 0px 0px 0px 0px var(--v2-alpha-dark-0)",
+  "v2-elevation-floating":
+    "0px 8px 16px 0px var(--v2-alpha-dark-4), 0px 4px 8px 0px var(--v2-alpha-dark-8), 0px 0px 0px 0.5px var(--v2-alpha-dark-12), 0px 0px 0px 0px var(--v2-alpha-dark-0)",
+  "v2-elevation-overlay":
+    "0px 16px 32px 0px var(--v2-alpha-dark-4), 0px 8px 16px 0px var(--v2-alpha-dark-8), 0px 0px 0px 0.5px var(--v2-alpha-dark-12), 0px 0px 0px 0px var(--v2-alpha-dark-0)",
+  "v2-elevation-button-neutral":
+    "0px 1px 1.5px 0px var(--v2-alpha-dark-10), 0px 0px 0px 0.5px var(--v2-alpha-dark-14), 0px 0px 0px 0px var(--v2-alpha-dark-0)",
+  "v2-elevation-button-contrast":
+    "0px 1px 1.5px 0px var(--v2-alpha-dark-20), 0px 0px 0px 0.5px var(--v2-grey-800), inset 0px 1px 2px 0px var(--v2-alpha-light-14), inset 0px -1px 2px 0px var(--v2-alpha-dark-6), 0px 0px 0px 0px var(--v2-alpha-dark-0)",
+  "v2-elevation-elements": "0px 0.5px 0.5px 0px var(--v2-alpha-dark-40)",
+  "v2-elevation-switch-off":
+    "inset 0px 1px 1px 0px var(--v2-alpha-dark-8), inset 0px 0.5px 0.5px 0px var(--v2-alpha-dark-8), inset 0px 0px 0px 0.5px var(--v2-alpha-dark-10)",
+  "v2-elevation-switch-on":
+    "inset 0px 2px 2px 0px var(--v2-alpha-dark-10), inset 0px 1px 1px 0px var(--v2-alpha-dark-10), inset 0px 0px 0px 0.5px var(--v2-alpha-dark-20)",
+  "v2-illustration-illustration-layer-01": ref("v2-grey-300"),
+  "v2-illustration-illustration-layer-02": ref("v2-grey-400"),
+  "v2-illustration-illustration-layer-03": ref("v2-grey-500"),
+}
+
+const dark: Record<string, V2ColorValue> = {
+  "v2-background-bg-base": ref("v2-grey-1000"),
+  "v2-background-bg-deep": ref("v2-grey-1100"),
+  "v2-background-bg-layer-01": ref("v2-grey-800"),
+  "v2-background-bg-layer-02": ref("v2-grey-600"),
+  "v2-background-bg-layer-03": ref("v2-grey-500"),
+  "v2-background-bg-layer-04": ref("v2-grey-400"),
+  "v2-background-bg-inverse": ref("v2-grey-100"),
+  "v2-background-bg-contrast": ref("v2-grey-700"),
+  "v2-background-bg-icon-button-contrast": ref("v2-grey-400"),
+  "v2-background-bg-button-neutral": ref("v2-alpha-light-6"),
+  "v2-background-bg-accent": ref("v2-blue-600"),
+  "v2-background-bg-code-path": ref("v2-cyan-1200"),
+  "v2-text-text-inverse": ref("v2-grey-1000"),
+  "v2-text-text-contrast": ref("v2-grey-100"),
+  "v2-text-text-accent": ref("v2-blue-400"),
+  "v2-text-text-accent-hover": ref("v2-blue-300"),
+  "v2-text-text-code-accent": ref("v2-blue-400"),
+  "v2-text-text-code-path": ref("v2-blue-300"),
+  "v2-border-border-muted": ref("v2-alpha-light-8"),
+  "v2-border-border-base": ref("v2-alpha-light-10"),
+  "v2-border-border-strong": ref("v2-alpha-light-20"),
+  "v2-border-border-inverse": ref("v2-grey-100"),
+  "v2-border-border-focus": ref("v2-blue-500"),
+  "v2-overlay-simple-overlay-hover": ref("v2-alpha-light-6"),
+  "v2-overlay-simple-overlay-pressed": ref("v2-alpha-light-10"),
+  "v2-overlay-simple-overlay-contrast-hover": ref("v2-alpha-dark-24"),
+  "v2-overlay-simple-overlay-contrast-pressed": ref("v2-alpha-dark-40"),
+  "v2-overlay-simple-overlay-scrim": ref("v2-alpha-dark-60"),
+  "v2-overlay-gradient-depth-overlay-depth-top": ref("v2-alpha-light-100"),
+  "v2-overlay-gradient-depth-overlay-depth-bot": ref("v2-alpha-light-0"),
+  "v2-overlay-simple-tab-active-scrim": "#24242400",
+  "v2-overlay-simple-tab-hover-scrim": "#3a3a3a00",
+  "v2-overlay-simple-tab-scrim": "#08080800",
+  "v2-state-bg-success": ref("v2-green-1200"),
+  "v2-state-fg-success": ref("v2-green-500"),
+  "v2-state-border-success": ref("v2-green-900"),
+  "v2-state-bg-warning": ref("v2-yellow-1200"),
+  "v2-state-fg-warning": ref("v2-yellow-500"),
+  "v2-state-border-warning": ref("v2-yellow-900"),
+  "v2-state-bg-danger": ref("v2-red-1200"),
+  "v2-state-fg-danger": ref("v2-red-500"),
+  "v2-state-border-danger": ref("v2-red-900"),
+  "v2-state-bg-info": ref("v2-blue-1200"),
+  "v2-state-fg-info": ref("v2-blue-500"),
+  "v2-state-border-info": ref("v2-blue-900"),
+  ...darkAgentTokens,
+  ...V2_AVATAR_DARK,
+  "v2-elevation-raised":
+    "0px 2px 4px 0px var(--v2-alpha-dark-30), 0px 1px 2px 0px var(--v2-alpha-dark-30), 0px 0px 0px 0.5px var(--v2-alpha-light-16), 0px -0.5px 0px 0px var(--v2-alpha-light-6)",
+  "v2-elevation-floating":
+    "0px 8px 16px 0px var(--v2-alpha-dark-30), 0px 4px 8px 0px var(--v2-alpha-dark-30), 0px 0px 0px 0.5px var(--v2-alpha-light-16), 0px -0.5px 0px 0px var(--v2-alpha-light-6)",
+  "v2-elevation-overlay":
+    "0px 16px 32px 0px var(--v2-alpha-dark-30), 0px 8px 16px 0px var(--v2-alpha-dark-30), 0px 0px 0px 0.5px var(--v2-alpha-light-16), 0px -0.5px 0px 0px var(--v2-alpha-light-6)",
+  "v2-elevation-button-neutral":
+    "0px 1px 2px 0px var(--v2-alpha-dark-40), 0px 0px 0px 0.5px var(--v2-alpha-light-20), 0px -0.5px 0px 0px var(--v2-alpha-light-10)",
+  "v2-elevation-button-contrast":
+    "0px 1px 2px 0px var(--v2-alpha-dark-40), 0px 0px 0px 0.5px var(--v2-alpha-light-40), inset 0px 0px 0px 0px var(--v2-alpha-light-0), inset 0px 0px 0px 0px var(--v2-alpha-light-0), 0px -0.5px 0px 0px var(--v2-alpha-light-30)",
+  "v2-elevation-elements": "0px 0.5px 0.5px 0px var(--v2-alpha-dark-40)",
+  "v2-elevation-switch-off":
+    "inset 0px -0.5px 0px 0px var(--v2-alpha-light-10), inset 0px 0px 0px 0px var(--v2-alpha-light-0), inset 0px 0px 0px 0.5px var(--v2-alpha-light-16)",
+  "v2-elevation-switch-on":
+    "inset 0px -0.5px 0px 0px var(--v2-alpha-light-10), inset 0px 0px 0px 0px var(--v2-alpha-light-0), inset 0px 0px 0px 0.5px var(--v2-alpha-light-16)",
+  "v2-illustration-illustration-layer-01": ref("v2-grey-900"),
+  "v2-illustration-illustration-layer-02": ref("v2-grey-800"),
+  "v2-illustration-illustration-layer-03": ref("v2-grey-700"),
+}
+
+export function mapV2Semantics(isDark: boolean): Record<string, V2ColorValue> {
+  return isDark ? dark : light
+}
+
+export function mergeV2Tokens(...layers: Record<string, V2ColorValue>[]): Record<string, V2ColorValue> {
+  return Object.assign({}, ...layers)
+}

package/src/theme/v2/resolve.ts

@@ -0,0 +1,153 @@
+// @refresh reload
+
+import { generateNeutralScale, hexToOklch, oklchToHex, shift } from "../color"
+import { mapV2Foreground } from "./foreground"
+import { mapV2Semantics, mergeV2Tokens } from "./mapping"
+import type { DesktopTheme, HexColor, ResolvedV2Theme, ThemeVariant, V2ColorValue } from "../types"
+import { V2_PRIMITIVES_DEFAULT } from "./default-primitives"
+
+const V2_STEPS = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200] as const
+
+interface PaletteInput {
+  neutral: HexColor
+  ink: HexColor
+  primary: HexColor
+  accent: HexColor
+  success: HexColor
+  warning: HexColor
+  error: HexColor
+  info: HexColor
+  interactive: HexColor
+  diffAdd: HexColor
+  diffDelete: HexColor
+}
+
+function clamp(v: number, min: number, max: number) {
+  return Math.max(min, Math.min(max, v))
+}
+
+/** v2 ramps: 100 = lightest, 1200 = darkest — wider spread than v1 `generateScale`. */
+function generateV2HueScale(seed: HexColor, isDark: boolean): HexColor[] {
+  const base = hexToOklch(seed)
+  const chromaBoost = isDark ? 1 : 1.05
+  const lightSteps = [
+    0.99,
+    0.965,
+    0.93,
+    0.885,
+    0.835,
+    clamp(base.l, 0.48, 0.72),
+    clamp(base.l - 0.07, 0.4, 0.64),
+    clamp(base.l - 0.14, 0.32, 0.55),
+    clamp(base.l - 0.21, 0.24, 0.46),
+    clamp(base.l - 0.28, 0.17, 0.38),
+    clamp(base.l - 0.34, 0.12, 0.3),
+    clamp(base.l - 0.4, 0.08, 0.22),
+  ]
+  const chromaMultipliers = [0.28, 0.48, 0.68, 0.86, 1.02, 1.28, 1.34, 1.28, 1.18, 1.08, 0.98, 0.88]
+
+  return lightSteps.map((l, i) =>
+    oklchToHex({
+      l,
+      c: base.c * chromaMultipliers[i]! * chromaBoost,
+      h: base.h,
+    }),
+  )
+}
+
+/** Grey ramp: 100 = lightest, 1200 = darkest. Derived from palette neutral → ink like v1. */
+function generateV2NeutralScale(neutral: HexColor, ink: HexColor, isDark: boolean): HexColor[] {
+  const scale = generateNeutralScale(neutral, isDark, ink)
+  return isDark ? scale.toReversed() : scale
+}
+
+function assignHueRamp(prefix: string, scale: HexColor[]): Record<string, V2ColorValue> {
+  const tokens: Record<string, V2ColorValue> = {}
+  for (let i = 0; i < V2_STEPS.length; i++) {
+    tokens[`v2-${prefix}-${V2_STEPS[i]}`] = scale[i]!
+  }
+  return tokens
+}
+
+function readPalette(variant: ThemeVariant): PaletteInput {
+  if ("palette" in variant && variant.palette) {
+    const palette = variant.palette
+    return {
+      neutral: palette.neutral,
+      ink: palette.ink,
+      primary: palette.primary,
+      accent: palette.accent ?? palette.info,
+      success: palette.success,
+      warning: palette.warning,
+      error: palette.error,
+      info: palette.info,
+      interactive: palette.interactive ?? palette.primary,
+      diffAdd: palette.diffAdd ?? shift(palette.success, { c: 0.55, l: 0.14 }),
+      diffDelete: palette.diffDelete ?? palette.error,
+    }
+  }
+  if ("seeds" in variant && variant.seeds) {
+    const seeds = variant.seeds
+    return {
+      neutral: seeds.neutral,
+      ink: seeds.neutral,
+      primary: seeds.primary,
+      accent: seeds.info,
+      success: seeds.success,
+      warning: seeds.warning,
+      error: seeds.error,
+      info: seeds.info,
+      interactive: seeds.interactive,
+      diffAdd: seeds.diffAdd,
+      diffDelete: seeds.diffDelete,
+    }
+  }
+  throw new Error("Theme variant requires `palette` or `seeds`")
+}
+
+/** Build v2 primitive ramps (100 = lightest). Alpha ramps are static in `v2/styles/colors.css`. */
+export function generateV2Primitives(variant: ThemeVariant, isDark: boolean): Record<string, V2ColorValue> {
+  const colors = readPalette(variant)
+  const grey = generateV2NeutralScale(colors.neutral, colors.ink, isDark)
+  const blue = generateV2HueScale(colors.interactive, isDark)
+  const green = generateV2HueScale(colors.success, isDark)
+  const yellow = generateV2HueScale(colors.warning, isDark)
+  const red = generateV2HueScale(colors.error, isDark)
+  const purple = generateV2HueScale(colors.accent, isDark)
+  const pink = generateV2HueScale(colors.info, isDark)
+  const orange = generateV2HueScale(shift(colors.warning, { h: -22, l: -0.082, c: 0.94 }), isDark)
+  const cyan = generateV2HueScale(shift(colors.info, { h: -12, l: 0.128, c: 1.12 }), isDark)
+
+  return {
+    ...V2_PRIMITIVES_DEFAULT,
+    ...assignHueRamp("grey", grey),
+    ...assignHueRamp("blue", blue),
+    ...assignHueRamp("green", green),
+    ...assignHueRamp("yellow", yellow),
+    ...assignHueRamp("red", red),
+    ...assignHueRamp("purple", purple),
+    ...assignHueRamp("pink", pink),
+    ...assignHueRamp("orange", orange),
+    ...assignHueRamp("cyan", cyan),
+  }
+}
+
+export function resolveThemeVariantV2(variant: ThemeVariant, isDark: boolean): ResolvedV2Theme {
+  const primitives = generateV2Primitives(variant, isDark)
+  const semantics = mapV2Semantics(isDark)
+  const foreground = mapV2Foreground(readPalette(variant).ink, isDark, primitives, variant.overrides)
+  return mergeV2Tokens(primitives, semantics, foreground, variant.v2Overrides ?? {})
+}
+
+export function resolveThemeV2(theme: DesktopTheme): { light: ResolvedV2Theme; dark: ResolvedV2Theme } {
+  return {
+    light: resolveThemeVariantV2(theme.light, false),
+    dark: resolveThemeVariantV2(theme.dark, true),
+  }
+}
+
+export function themeV2ToCss(tokens: ResolvedV2Theme): string {
+  return Object.entries(tokens)
+    .map(([key, value]) => `--${key}: ${value};`)
+    .join("\n  ")
+}

package/src/typography/text-shimmer/text-shimmer.css

@@ -0,0 +1,120 @@
+[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-gutter: calc(var(--text-shimmer-spread) + 1ch);
+  --text-shimmer-size: calc(200% + var(--text-shimmer-gutter) + var(--text-shimmer-gutter));
+  --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/typography/text-shimmer/text-shimmer.tsx

@@ -0,0 +1,63 @@
+import { createEffect, createMemo, createSignal, onCleanup, type ValidComponent } from "solid-js"
+import { Dynamic } from "solid-js/web"
+import "./text-shimmer.css"
+
+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/typography/wordmark/wordmark.tsx

@@ -0,0 +1,39 @@
+import { createUniqueId, type ComponentProps } from "solid-js"
+
+export function Wordmark(props: Pick<ComponentProps<"svg">, "class"> & { fade?: boolean; muted?: boolean }) {
+  const mask = createUniqueId()
+  const maskGradient = createUniqueId()
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 720 129"
+      fill="none"
+      classList={{ [props.class ?? ""]: !!props.class }}
+    >
+      <g opacity={props.muted === false ? 1 : 0.6} class="[[data-color-scheme=dark]_&]:opacity-100">
+        <g mask={props.fade === false ? undefined : `url(#${mask})`}>
+          <g opacity={props.muted === false ? 1 : 0.16 * 0.7} fill="currentColor">
+            <path d="M55.3846 36.4286H18.4615V91.7143H55.3846V36.4286ZM73.8462 110.143H0V18H73.8462V110.143Z" />
+            <path d="M110.462 91.7143H147.385V36.4286H110.462V91.7143ZM165.846 110.143H110.462V128.571H92V18H165.846V110.143Z" />
+            <path d="M258.846 73.2857H203.462V91.7143H258.846V110.143H185V18H258.846V73.2857ZM203.462 54.8571H240.385V36.4286H203.462V54.8571Z" />
+            <path d="M332.385 36.4286H295.462V110.143H277V18H332.385V36.4286ZM350.846 110.143H332.385V36.4286H350.846V110.143Z" />
+            <path d="M442.846 36.4286H387.462V91.7143H442.846V110.143H369V18H442.846V36.4286Z" />
+            <path d="M517.385 36.4286H480.462V91.7143H517.385V36.4286ZM535.846 110.143H462V18H535.846V110.143Z" />
+            <path d="M609.385 36.8571H572.462V92.1429H609.385V36.8571ZM627.846 110.571H554V18.4286H609.385V0H627.846V110.571Z" />
+            <path d="M664.462 36.4286V54.8571H701.385V36.4286H664.462ZM719.846 73.2857H664.462V91.7143H719.846V110.143H646V18H719.846V73.2857Z" />
+          </g>
+        </g>
+      </g>
+      <defs>
+        <mask id={mask} style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="720" height="129">
+          <rect width="720" height="129" fill={`url(#${maskGradient})`} />
+        </mask>
+        <linearGradient id={maskGradient} x1="360" y1="68" x2="360" y2="129" gradientUnits="userSpaceOnUse">
+          <stop stop-color="white" stop-opacity="0.7" />
+          <stop offset="1" stop-color="white" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}

package/README.md

@@ -1,5 +0,0 @@
-# @opencode/ui
-
-Bootstrap placeholder for the official [OpenCode](https://opencode.ai) release pipeline.
-
-This version contains no implementation or executable. Do not use it as a functional release.