@opencode-ai/ui 0.0.0-dev-202609060432 → 0.0.0-dev-19178

package/src/{v2/styles → styles/tokens}/theme.css

@@ -1,16 +1,4 @@
 @layer theme {
-  html[data-theme="oc-2"] body:not([data-new-layout]) {
-    --text-diff-add-base: light-dark(#167517, #c4ffc0);
-    --text-diff-delete-base: light-dark(#fa3012, #ec2f14);
-    --syntax-comment: light-dark(#7a7a7a, #8f8f8f);
-    --syntax-keyword: light-dark(#a753ae, #edb2f1);
-    --syntax-string: #00ceb9;
-    --syntax-primitive: light-dark(#034cff, #8cb0ff);
-    --syntax-property: light-dark(#a753ae, #fab283);
-    --syntax-type: light-dark(#8a6f00, #fcd53a);
-    --syntax-critical: light-dark(#ff8c00, #fab283);
-  }
-
   :root {
     color-scheme: light;
 
@@ -23,8 +11,10 @@
     --v2-background-bg-layer-04: var(--v2-grey-400);
     --v2-background-bg-inverse: var(--v2-grey-1100);
     --v2-background-bg-contrast: var(--v2-grey-1000);
+    --v2-background-bg-icon-button-contrast: var(--v2-background-bg-contrast);
     --v2-background-bg-button-neutral: var(--v2-grey-50);
     --v2-background-bg-accent: var(--v2-blue-600);
+    --v2-background-bg-code-path: var(--v2-cyan-100);
 
     /* ── Text ── */
     --v2-text-text-base: var(--v2-grey-1100);
@@ -35,10 +25,12 @@
     --v2-text-text-accent: var(--v2-blue-600);
     --v2-text-text-accent-hover: var(--v2-blue-700);
     --v2-text-text-code-accent: var(--v2-blue-900);
+    --v2-text-text-code-path: var(--v2-blue-900);
 
     /* ── Icon ── */
     --v2-icon-icon-base: var(--v2-grey-800);
     --v2-icon-icon-muted: var(--v2-grey-600);
+    --v2-icon-icon-faint: var(--v2-grey-500);
     --v2-icon-icon-inverse: var(--v2-grey-50);
     --v2-icon-icon-contrast: var(--v2-grey-100);
     --v2-icon-icon-accent: var(--v2-blue-600);
@@ -73,7 +65,7 @@
     --v2-state-bg-danger: var(--v2-red-100);
     --v2-state-fg-danger: var(--v2-red-800);
     --v2-state-border-danger: var(--v2-red-300);
-    --v2-state-bg-info: var(--v2-blue-100);
+    --v2-state-bg-info: var(--v2-blue-200);
     --v2-state-fg-info: var(--v2-blue-800);
     --v2-state-border-info: var(--v2-blue-300);
 
@@ -140,8 +132,12 @@
     --v2-illustration-illustration-layer-02: var(--v2-grey-400);
     --v2-illustration-illustration-layer-03: var(--v2-grey-500);
 
-    --font-family-text: "Inter", sans-serif;
-    --v2-font-family-sans: "Inter", sans-serif;
+    --font-family-text: var(--font-family-sans);
+    --v2-font-family-sans: var(--font-family-sans);
+    --v2-font-family-code: var(--font-family-mono);
+    --line-height-tight: 12px;
+    --line-height-compact: 16px;
+    --line-height-base: 20px;
   }
 
   /* OS preference fallback (no JS needed) */
@@ -158,6 +154,7 @@
       --v2-background-bg-contrast: var(--v2-grey-700);
       --v2-background-bg-button-neutral: var(--v2-alpha-light-6);
       --v2-background-bg-accent: var(--v2-blue-600);
+      --v2-background-bg-code-path: var(--v2-cyan-1200);
 
       --v2-text-text-base: var(--v2-grey-200);
       --v2-text-text-muted: var(--v2-grey-500);
@@ -167,9 +164,11 @@
       --v2-text-text-accent: var(--v2-blue-400);
       --v2-text-text-accent-hover: var(--v2-blue-300);
       --v2-text-text-code-accent: var(--v2-blue-400);
+      --v2-text-text-code-path: var(--v2-blue-300);
 
       --v2-icon-icon-base: var(--v2-grey-400);
       --v2-icon-icon-muted: var(--v2-grey-600);
+      --v2-icon-icon-faint: var(--v2-grey-500);
       --v2-icon-icon-inverse: var(--v2-grey-1000);
       --v2-icon-icon-contrast: var(--v2-grey-200);
       --v2-icon-icon-accent: var(--v2-blue-400);
@@ -269,8 +268,10 @@
     --v2-background-bg-layer-04: var(--v2-grey-400);
     --v2-background-bg-inverse: var(--v2-grey-1100);
     --v2-background-bg-contrast: var(--v2-grey-1000);
+    --v2-background-bg-icon-button-contrast: var(--v2-background-bg-contrast);
     --v2-background-bg-button-neutral: var(--v2-grey-50);
     --v2-background-bg-accent: var(--v2-blue-600);
+    --v2-background-bg-code-path: var(--v2-cyan-100);
 
     --v2-text-text-base: var(--v2-grey-1100);
     --v2-text-text-muted: var(--v2-grey-700);
@@ -280,9 +281,11 @@
     --v2-text-text-accent: var(--v2-blue-600);
     --v2-text-text-accent-hover: var(--v2-blue-700);
     --v2-text-text-code-accent: var(--v2-blue-900);
+    --v2-text-text-code-path: var(--v2-blue-900);
 
     --v2-icon-icon-base: var(--v2-grey-800);
     --v2-icon-icon-muted: var(--v2-grey-600);
+    --v2-icon-icon-faint: var(--v2-grey-500);
     --v2-icon-icon-inverse: var(--v2-grey-50);
     --v2-icon-icon-contrast: var(--v2-grey-100);
     --v2-icon-icon-accent: var(--v2-blue-600);
@@ -314,7 +317,7 @@
     --v2-state-bg-danger: var(--v2-red-100);
     --v2-state-fg-danger: var(--v2-red-800);
     --v2-state-border-danger: var(--v2-red-300);
-    --v2-state-bg-info: var(--v2-blue-100);
+    --v2-state-bg-info: var(--v2-blue-200);
     --v2-state-fg-info: var(--v2-blue-800);
     --v2-state-border-info: var(--v2-blue-300);
 
@@ -391,8 +394,10 @@
     --v2-background-bg-layer-04: var(--v2-grey-700);
     --v2-background-bg-inverse: var(--v2-grey-50);
     --v2-background-bg-contrast: var(--v2-grey-700);
+    --v2-background-bg-icon-button-contrast: var(--v2-grey-400);
     --v2-background-bg-button-neutral: var(--v2-alpha-light-6);
     --v2-background-bg-accent: var(--v2-blue-600);
+    --v2-background-bg-code-path: var(--v2-cyan-1200);
 
     --v2-text-text-base: var(--v2-grey-100);
     --v2-text-text-muted: var(--v2-grey-500);
@@ -402,9 +407,11 @@
     --v2-text-text-accent: var(--v2-blue-400);
     --v2-text-text-accent-hover: var(--v2-blue-300);
     --v2-text-text-code-accent: var(--v2-blue-400);
+    --v2-text-text-code-path: var(--v2-blue-300);
 
     --v2-icon-icon-base: var(--v2-grey-400);
     --v2-icon-icon-muted: var(--v2-grey-600);
+    --v2-icon-icon-faint: var(--v2-grey-500);
     --v2-icon-icon-inverse: var(--v2-grey-1100);
     --v2-icon-icon-contrast: var(--v2-grey-100);
     --v2-icon-icon-accent: var(--v2-blue-400);

package/src/theme/context.tsx

@@ -84,8 +84,9 @@ const names: Record<string, string> = {
 }
 const oc2Theme = oc2ThemeJson as DesktopTheme
 
-function normalize(id: string | null | undefined) {
-  return id === "oc-1" ? "oc-2" : id
+function resolveStoredTheme(id: string | null | undefined, registered?: Record<string, DesktopTheme>) {
+  if (id === "oc-2" || (id && (knownThemes().has(id) || registered?.[id]))) return id
+  return "oc-2"
 }
 
 function read(key: string) {
@@ -177,7 +178,12 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
     defaultTheme?: string
     onThemeApplied?: (theme: DesktopTheme, mode: "light" | "dark", scheme: ColorScheme) => void
   }) => {
-    const themeId = normalize(read(STORAGE_KEYS.THEME_ID) ?? props.defaultTheme) ?? "oc-2"
+    const rawTheme = read(STORAGE_KEYS.THEME_ID) ?? props.defaultTheme
+    const themeId = resolveStoredTheme(rawTheme)
+    if (rawTheme && rawTheme !== themeId) {
+      write(STORAGE_KEYS.THEME_ID, themeId)
+      clear()
+    }
     const colorScheme = (read(STORAGE_KEYS.COLOR_SCHEME) as ColorScheme | null) ?? "system"
     const mode = colorScheme === "system" ? getSystemMode() : colorScheme
     const [store, setStore] = createStore({
@@ -194,7 +200,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
     const loads = new Map<string, Promise<DesktopTheme | undefined>>()
 
     const load = (id: string) => {
-      const next = normalize(id)
+      const next = id
       if (!next) return Promise.resolve(undefined)
       const hit = store.themes[next]
       if (hit) return Promise.resolve(hit)
@@ -233,9 +239,11 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
 
     const onStorage = (e: StorageEvent) => {
       if (e.key === STORAGE_KEYS.THEME_ID && e.newValue) {
-        const next = normalize(e.newValue)
-        if (!next) return
-        if (next !== "oc-2" && !knownThemes().has(next) && !store.themes[next]) return
+        const next = resolveStoredTheme(e.newValue, store.themes)
+        if (next !== e.newValue) {
+          write(STORAGE_KEYS.THEME_ID, next)
+          clear()
+        }
         setStore("themeId", next)
         if (next === "oc-2") {
           clear()
@@ -262,8 +270,8 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
       }
       makeEventListener(mediaQuery, "change", onMedia)
 
-      const rawTheme = read(STORAGE_KEYS.THEME_ID)
-      const savedTheme = normalize(rawTheme ?? props.defaultTheme) ?? "oc-2"
+      const rawTheme = read(STORAGE_KEYS.THEME_ID) ?? props.defaultTheme
+      const savedTheme = resolveStoredTheme(rawTheme, store.themes)
       const savedScheme = (read(STORAGE_KEYS.COLOR_SCHEME) as ColorScheme | null) ?? "system"
       if (rawTheme && rawTheme !== savedTheme) {
         write(STORAGE_KEYS.THEME_ID, savedTheme)
@@ -285,7 +293,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
     })
 
     const setTheme = (id: string) => {
-      const next = normalize(id)
+      const next = id
       if (!next) {
         console.warn(`Theme "${id}" not found`)
         return
@@ -325,7 +333,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
       setColorScheme,
       registerTheme: (theme: DesktopTheme) => setStore("themes", theme.id, theme),
       previewTheme: (id: string) => {
-        const next = normalize(id)
+        const next = id
         if (!next) return
         if (next !== "oc-2" && !knownThemes().has(next) && !store.themes[next]) return
         setStore("previewThemeId", next)

package/src/theme/themes/oc-2.json

@@ -25,7 +25,7 @@
       "border-weak-base": "#DBDBDB",
       "border-weaker-base": "#E8E8E8",
       "icon-base": "#8F8F8F",
-      "icon-weak-base": "#C7C7C7",
+      "icon-weak-base": "C7C7C7",
       "surface-raised-base": "#F3F3F3",
       "surface-raised-base-hover": "#EDEDED",
       "surface-base": "#F8F8F8",
@@ -120,18 +120,18 @@
       "v2-cyan-1000": "#005a6eff",
       "v2-cyan-1100": "#004756ff",
       "v2-cyan-1200": "#00353fff",
-      "v2-blue-100": "#ecf1feff",
-      "v2-blue-200": "#d7e2fcff",
+      "v2-blue-100": "#f5f8ffff",
+      "v2-blue-200": "#ecf1feff",
       "v2-blue-300": "#c3d4fdff",
       "v2-blue-400": "#a2bcffff",
       "v2-blue-500": "#7698fdff",
       "v2-blue-600": "#3b5cf6ff",
-      "v2-blue-700": "#3250dfff",
-      "v2-blue-800": "#2c47c8ff",
-      "v2-blue-900": "#263fa9ff",
-      "v2-blue-1000": "#22388fff",
-      "v2-blue-1100": "#1c2e70ff",
-      "v2-blue-1200": "#1b2852ff",
+      "v2-blue-700": "#0b34f4ff",
+      "v2-blue-800": "#3250dfff",
+      "v2-blue-900": "#2c47c8ff",
+      "v2-blue-1000": "#263fa9ff",
+      "v2-blue-1100": "#22388fff",
+      "v2-blue-1200": "#021945ff",
       "v2-purple-100": "#ebecfeff",
       "v2-purple-200": "#d5d5fcff",
       "v2-purple-300": "#b9b8f5ff",
@@ -164,8 +164,10 @@
       "v2-background-bg-layer-04": "var(--v2-grey-400)",
       "v2-background-bg-inverse": "var(--v2-grey-1100)",
       "v2-background-bg-contrast": "var(--v2-grey-1000)",
+      "v2-background-bg-icon-button-contrast": "var(--v2-background-bg-contrast)",
       "v2-background-bg-button-neutral": "var(--v2-grey-50)",
       "v2-background-bg-accent": "var(--v2-blue-600)",
+      "v2-background-bg-code-path": "var(--v2-cyan-100)",
       "v2-text-text-base": "var(--v2-grey-1100)",
       "v2-text-text-muted": "var(--v2-grey-700)",
       "v2-text-text-faint": "var(--v2-grey-600)",
@@ -174,8 +176,10 @@
       "v2-text-text-accent": "var(--v2-blue-600)",
       "v2-text-text-accent-hover": "var(--v2-blue-700)",
       "v2-text-text-code-accent": "var(--v2-blue-900)",
+      "v2-text-text-code-path": "var(--v2-blue-900)",
       "v2-icon-icon-base": "var(--v2-grey-800)",
       "v2-icon-icon-muted": "var(--v2-grey-600)",
+      "v2-icon-icon-faint": "var(--v2-grey-500)",
       "v2-icon-icon-inverse": "var(--v2-grey-50)",
       "v2-icon-icon-contrast": "var(--v2-grey-100)",
       "v2-icon-icon-accent": "var(--v2-blue-600)",
@@ -204,9 +208,20 @@
       "v2-state-bg-danger": "var(--v2-red-100)",
       "v2-state-fg-danger": "var(--v2-red-800)",
       "v2-state-border-danger": "var(--v2-red-300)",
-      "v2-state-bg-info": "var(--v2-blue-100)",
+      "v2-state-bg-info": "var(--v2-blue-200)",
       "v2-state-fg-info": "var(--v2-blue-800)",
       "v2-state-border-info": "var(--v2-blue-300)",
+      "v2-agent-plan-solid": "var(--v2-pink-800)",
+      "v2-agent-plan-border": "rgba(200, 61, 139, 0.2)",
+      "v2-agent-plan-background": "rgba(253, 236, 243, 0.1)",
+      "v2-agent-build-solid": "var(--v2-blue-800)",
+      "v2-agent-build-border": "rgba(44, 71, 200, 0.1)",
+      "v2-agent-build-background": "rgba(236, 241, 254, 0.1)",
+      "v2-agent-explore-solid": "var(--v2-yellow-900)",
+      "v2-agent-explore-border": "rgba(203, 159, 52, 0.2)",
+      "v2-agent-explore-background": "rgba(254, 250, 236, 0.1)",
+      "v2-agent-review-solid": "var(--v2-green-800)",
+      "v2-agent-writer-solid": "var(--v2-purple-700)",
       "v2-avatar-bg-orange": "#ee7330ff",
       "v2-avatar-border-orange": "#d16427ff",
       "v2-avatar-bg-yellow": "#e7af36ff",
@@ -235,7 +250,8 @@
       "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": "var(--v2-grey-300)",
       "v2-illustration-illustration-layer-02": "var(--v2-grey-400)",
-      "v2-illustration-illustration-layer-03": "var(--v2-grey-500)"
+      "v2-illustration-illustration-layer-03": "var(--v2-grey-500)",
+      "v2-font-family-code": "var(--font-family-mono)"
     }
   },
   "dark": {
@@ -355,18 +371,18 @@
       "v2-cyan-1000": "#005a6eff",
       "v2-cyan-1100": "#004756ff",
       "v2-cyan-1200": "#00353fff",
-      "v2-blue-100": "#ecf1feff",
-      "v2-blue-200": "#d7e2fcff",
+      "v2-blue-100": "#f5f8ffff",
+      "v2-blue-200": "#ecf1feff",
       "v2-blue-300": "#c3d4fdff",
       "v2-blue-400": "#a2bcffff",
       "v2-blue-500": "#7698fdff",
       "v2-blue-600": "#3b5cf6ff",
-      "v2-blue-700": "#3250dfff",
-      "v2-blue-800": "#2c47c8ff",
-      "v2-blue-900": "#263fa9ff",
-      "v2-blue-1000": "#22388fff",
-      "v2-blue-1100": "#1c2e70ff",
-      "v2-blue-1200": "#1b2852ff",
+      "v2-blue-700": "#0b34f4ff",
+      "v2-blue-800": "#3250dfff",
+      "v2-blue-900": "#2c47c8ff",
+      "v2-blue-1000": "#263fa9ff",
+      "v2-blue-1100": "#22388fff",
+      "v2-blue-1200": "#021945ff",
       "v2-purple-100": "#ebecfeff",
       "v2-purple-200": "#d5d5fcff",
       "v2-purple-300": "#b9b8f5ff",
@@ -399,8 +415,10 @@
       "v2-background-bg-layer-04": "var(--v2-grey-700)",
       "v2-background-bg-inverse": "var(--v2-grey-50)",
       "v2-background-bg-contrast": "var(--v2-grey-700)",
+      "v2-background-bg-icon-button-contrast": "var(--v2-grey-400)",
       "v2-background-bg-button-neutral": "var(--v2-alpha-light-6)",
       "v2-background-bg-accent": "var(--v2-blue-600)",
+      "v2-background-bg-code-path": "var(--v2-cyan-1200)",
       "v2-text-text-base": "var(--v2-grey-100)",
       "v2-text-text-muted": "var(--v2-grey-500)",
       "v2-text-text-faint": "var(--v2-grey-600)",
@@ -409,8 +427,10 @@
       "v2-text-text-accent": "var(--v2-blue-400)",
       "v2-text-text-accent-hover": "var(--v2-blue-300)",
       "v2-text-text-code-accent": "var(--v2-blue-400)",
+      "v2-text-text-code-path": "var(--v2-blue-300)",
       "v2-icon-icon-base": "var(--v2-grey-400)",
       "v2-icon-icon-muted": "var(--v2-grey-600)",
+      "v2-icon-icon-faint": "var(--v2-grey-500)",
       "v2-icon-icon-inverse": "var(--v2-grey-1100)",
       "v2-icon-icon-contrast": "var(--v2-grey-100)",
       "v2-icon-icon-accent": "var(--v2-blue-400)",
@@ -442,6 +462,17 @@
       "v2-state-bg-info": "var(--v2-blue-1200)",
       "v2-state-fg-info": "var(--v2-blue-500)",
       "v2-state-border-info": "var(--v2-blue-900)",
+      "v2-agent-plan-solid": "var(--v2-pink-400)",
+      "v2-agent-plan-border": "rgba(247, 153, 198, 0.2)",
+      "v2-agent-plan-background": "rgba(170, 53, 118, 0.05)",
+      "v2-agent-build-solid": "var(--v2-blue-300)",
+      "v2-agent-build-border": "rgba(162, 188, 255, 0.2)",
+      "v2-agent-build-background": "rgba(38, 63, 169, 0.05)",
+      "v2-agent-explore-solid": "var(--v2-yellow-300)",
+      "v2-agent-explore-border": "rgba(243, 218, 155, 0.2)",
+      "v2-agent-explore-background": "rgba(172, 136, 51, 0.05)",
+      "v2-agent-review-solid": "var(--v2-green-300)",
+      "v2-agent-writer-solid": "var(--v2-purple-400)",
       "v2-avatar-bg-orange": "#723d22ff",
       "v2-avatar-border-orange": "#ff8648ff",
       "v2-avatar-bg-yellow": "#68552bff",

package/src/theme/v2/default-primitives.ts

@@ -75,18 +75,18 @@ export const V2_PRIMITIVES_DEFAULT: Record<string, V2ColorValue> = {
   "v2-cyan-1000": "#005a6eff",
   "v2-cyan-1100": "#004756ff",
   "v2-cyan-1200": "#00353fff",
-  "v2-blue-100": "#ecf1feff",
-  "v2-blue-200": "#d7e2fcff",
+  "v2-blue-100": "#f5f8ffff",
+  "v2-blue-200": "#ecf1feff",
   "v2-blue-300": "#c3d4fdff",
   "v2-blue-400": "#a2bcffff",
   "v2-blue-500": "#7698fdff",
   "v2-blue-600": "#3b5cf6ff",
-  "v2-blue-700": "#3250dfff",
-  "v2-blue-800": "#2c47c8ff",
-  "v2-blue-900": "#263fa9ff",
-  "v2-blue-1000": "#22388fff",
-  "v2-blue-1100": "#1c2e70ff",
-  "v2-blue-1200": "#1b2852ff",
+  "v2-blue-700": "#0b34f4ff",
+  "v2-blue-800": "#3250dfff",
+  "v2-blue-900": "#2c47c8ff",
+  "v2-blue-1000": "#263fa9ff",
+  "v2-blue-1100": "#22388fff",
+  "v2-blue-1200": "#021945ff",
   "v2-purple-100": "#ebecfeff",
   "v2-purple-200": "#d5d5fcff",
   "v2-purple-300": "#b9b8f5ff",

package/src/theme/v2/foreground.ts

@@ -52,6 +52,7 @@ export function mapV2Foreground(
     "v2-text-text-faint": shift(body, { l: isDark ? -0.2 : 0.21, c: isDark ? 0.78 : 0.72 }),
     "v2-icon-icon-base": greyRef(pickGrey(primitives, bgBase, 7, isDark ? 400 : 800)),
     "v2-icon-icon-muted": greyRef(pickGrey(primitives, bgBase, 3, 600)),
+    "v2-icon-icon-faint": greyRef(pickGrey(primitives, bgBase, 1.5, 500)),
     "v2-icon-icon-inverse": greyRef(pickGrey(primitives, bgInverse, 7, inverseTarget)),
     "v2-icon-icon-contrast": greyRef(pickGrey(primitives, bgContrast, 7, 100)),
     "v2-icon-icon-accent": isDark ? "var(--v2-blue-400)" : "var(--v2-blue-600)",

package/src/theme/v2/mapping.ts

@@ -40,13 +40,16 @@ const light: Record<string, V2ColorValue> = {
   "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"),
@@ -71,7 +74,7 @@ const light: Record<string, V2ColorValue> = {
   "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-100"),
+  "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,
@@ -105,13 +108,16 @@ const dark: Record<string, V2ColorValue> = {
   "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"),

package/src/{components → typography/text-shimmer}/text-shimmer.css

@@ -5,7 +5,8 @@
   --text-shimmer-index: 0;
   --text-shimmer-angle: 90deg;
   --text-shimmer-spread: 5.2ch;
-  --text-shimmer-size: 360%;
+  --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(

package/src/{components → typography/text-shimmer}/text-shimmer.tsx

@@ -1,5 +1,6 @@
 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

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/dist/components/avatar.d.ts

@@ -1,9 +0,0 @@
-import { type ComponentProps } from "solid-js";
-export interface AvatarProps extends ComponentProps<"div"> {
-    fallback: string;
-    src?: string;
-    background?: string;
-    foreground?: string;
-    size?: "small" | "normal" | "large";
-}
-export declare function Avatar(props: AvatarProps): import("solid-js").JSX.Element;

package/dist/components/button.d.ts

@@ -1,9 +0,0 @@
-import { Button as Kobalte } from "@kobalte/core/button";
-import { type ComponentProps } from "solid-js";
-import { IconProps } from "./icon";
-export interface ButtonProps extends ComponentProps<typeof Kobalte>, Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
-    size?: "small" | "normal" | "large";
-    variant?: "primary" | "secondary" | "ghost";
-    icon?: IconProps["name"];
-}
-export declare function Button(props: ButtonProps): import("solid-js").JSX.Element;

package/dist/components/dialog.d.ts

@@ -1,12 +0,0 @@
-import { ComponentProps, JSXElement, ParentProps } from "solid-js";
-export interface DialogProps extends ParentProps {
-    title?: JSXElement;
-    description?: JSXElement;
-    action?: JSXElement;
-    size?: "normal" | "large" | "x-large";
-    class?: ComponentProps<"div">["class"];
-    classList?: ComponentProps<"div">["classList"];
-    fit?: boolean;
-    transition?: boolean;
-}
-export declare function Dialog(props: DialogProps): import("solid-js").JSX.Element;

package/dist/components/dropdown-menu.d.ts

@@ -1,80 +0,0 @@
-import { DropdownMenu as Kobalte } from "@kobalte/core/dropdown-menu";
-import type { ComponentProps, ParentProps } from "solid-js";
-export interface DropdownMenuProps extends ComponentProps<typeof Kobalte> {
-}
-export interface DropdownMenuTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {
-}
-export interface DropdownMenuIconProps extends ComponentProps<typeof Kobalte.Icon> {
-}
-export interface DropdownMenuPortalProps extends ComponentProps<typeof Kobalte.Portal> {
-}
-export interface DropdownMenuContentProps extends ComponentProps<typeof Kobalte.Content> {
-}
-export interface DropdownMenuArrowProps extends ComponentProps<typeof Kobalte.Arrow> {
-}
-export interface DropdownMenuSeparatorProps extends ComponentProps<typeof Kobalte.Separator> {
-}
-export interface DropdownMenuGroupProps extends ComponentProps<typeof Kobalte.Group> {
-}
-export interface DropdownMenuGroupLabelProps extends ComponentProps<typeof Kobalte.GroupLabel> {
-}
-export interface DropdownMenuItemProps extends ComponentProps<typeof Kobalte.Item> {
-}
-export interface DropdownMenuItemLabelProps extends ComponentProps<typeof Kobalte.ItemLabel> {
-}
-export interface DropdownMenuItemDescriptionProps extends ComponentProps<typeof Kobalte.ItemDescription> {
-}
-export interface DropdownMenuItemIndicatorProps extends ComponentProps<typeof Kobalte.ItemIndicator> {
-}
-export interface DropdownMenuRadioGroupProps extends ComponentProps<typeof Kobalte.RadioGroup> {
-}
-export interface DropdownMenuRadioItemProps extends ComponentProps<typeof Kobalte.RadioItem> {
-}
-export interface DropdownMenuCheckboxItemProps extends ComponentProps<typeof Kobalte.CheckboxItem> {
-}
-export interface DropdownMenuSubProps extends ComponentProps<typeof Kobalte.Sub> {
-}
-export interface DropdownMenuSubTriggerProps extends ComponentProps<typeof Kobalte.SubTrigger> {
-}
-export interface DropdownMenuSubContentProps extends ComponentProps<typeof Kobalte.SubContent> {
-}
-declare function DropdownMenuRoot(props: DropdownMenuProps): import("solid-js").JSX.Element;
-declare function DropdownMenuTrigger(props: ParentProps<DropdownMenuTriggerProps>): import("solid-js").JSX.Element;
-declare function DropdownMenuIcon(props: ParentProps<DropdownMenuIconProps>): import("solid-js").JSX.Element;
-declare function DropdownMenuPortal(props: DropdownMenuPortalProps): import("solid-js").JSX.Element;
-declare function DropdownMenuContent(props: ParentProps<DropdownMenuContentProps>): import("solid-js").JSX.Element;
-declare function DropdownMenuArrow(props: DropdownMenuArrowProps): import("solid-js").JSX.Element;
-declare function DropdownMenuSeparator(props: DropdownMenuSeparatorProps): import("solid-js").JSX.Element;
-declare function DropdownMenuGroup(props: ParentProps<DropdownMenuGroupProps>): import("solid-js").JSX.Element;
-declare function DropdownMenuGroupLabel(props: ParentProps<DropdownMenuGroupLabelProps>): import("solid-js").JSX.Element;
-declare function DropdownMenuItem(props: ParentProps<DropdownMenuItemProps>): import("solid-js").JSX.Element;
-declare function DropdownMenuItemLabel(props: ParentProps<DropdownMenuItemLabelProps>): import("solid-js").JSX.Element;
-declare function DropdownMenuItemDescription(props: ParentProps<DropdownMenuItemDescriptionProps>): import("solid-js").JSX.Element;
-declare function DropdownMenuItemIndicator(props: ParentProps<DropdownMenuItemIndicatorProps>): import("solid-js").JSX.Element;
-declare function DropdownMenuRadioGroup(props: ParentProps<DropdownMenuRadioGroupProps>): import("solid-js").JSX.Element;
-declare function DropdownMenuRadioItem(props: ParentProps<DropdownMenuRadioItemProps>): import("solid-js").JSX.Element;
-declare function DropdownMenuCheckboxItem(props: ParentProps<DropdownMenuCheckboxItemProps>): import("solid-js").JSX.Element;
-declare function DropdownMenuSub(props: DropdownMenuSubProps): import("solid-js").JSX.Element;
-declare function DropdownMenuSubTrigger(props: ParentProps<DropdownMenuSubTriggerProps>): import("solid-js").JSX.Element;
-declare function DropdownMenuSubContent(props: ParentProps<DropdownMenuSubContentProps>): import("solid-js").JSX.Element;
-export declare const DropdownMenu: typeof DropdownMenuRoot & {
-    Trigger: typeof DropdownMenuTrigger;
-    Icon: typeof DropdownMenuIcon;
-    Portal: typeof DropdownMenuPortal;
-    Content: typeof DropdownMenuContent;
-    Arrow: typeof DropdownMenuArrow;
-    Separator: typeof DropdownMenuSeparator;
-    Group: typeof DropdownMenuGroup;
-    GroupLabel: typeof DropdownMenuGroupLabel;
-    Item: typeof DropdownMenuItem;
-    ItemLabel: typeof DropdownMenuItemLabel;
-    ItemDescription: typeof DropdownMenuItemDescription;
-    ItemIndicator: typeof DropdownMenuItemIndicator;
-    RadioGroup: typeof DropdownMenuRadioGroup;
-    RadioItem: typeof DropdownMenuRadioItem;
-    CheckboxItem: typeof DropdownMenuCheckboxItem;
-    Sub: typeof DropdownMenuSub;
-    SubTrigger: typeof DropdownMenuSubTrigger;
-    SubContent: typeof DropdownMenuSubContent;
-};
-export {};

package/dist/components/icon-button.d.ts

@@ -1,10 +0,0 @@
-import { Button as Kobalte } from "@kobalte/core/button";
-import { type ComponentProps } from "solid-js";
-import { IconProps } from "./icon";
-export interface IconButtonProps extends ComponentProps<typeof Kobalte> {
-    icon: IconProps["name"];
-    size?: "small" | "normal" | "large";
-    iconSize?: IconProps["size"];
-    variant?: "primary" | "secondary" | "ghost";
-}
-export declare function IconButton(props: ComponentProps<"button"> & IconButtonProps): import("solid-js").JSX.Element;

package/dist/components/keybind.d.ts

@@ -1,6 +0,0 @@
-import type { ComponentProps, ParentProps } from "solid-js";
-export interface KeybindProps extends ParentProps {
-    class?: string;
-    classList?: ComponentProps<"span">["classList"];
-}
-export declare function Keybind(props: KeybindProps): import("solid-js").JSX.Element;