@opencode-ai/ui 0.0.0-dev-19220 → 0.0.0-dev-202609070344

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/ui",
-  "version": "0.0.0-dev-19220",
+  "version": "0.0.0-dev-202609070344",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -34,133 +34,6 @@
   ],
   "exports": {
     "./package.json": "./package.json",
-    "./accordion": {
-      "types": "./dist/data-display/accordion/accordion.d.ts",
-      "import": "./src/data-display/accordion/accordion.tsx"
-    },
-    "./avatar": {
-      "types": "./dist/data-display/avatar/avatar.d.ts",
-      "import": "./src/data-display/avatar/avatar.tsx"
-    },
-    "./badge": {
-      "types": "./dist/data-display/badge/badge.d.ts",
-      "import": "./src/data-display/badge/badge.tsx"
-    },
-    "./button": {
-      "types": "./dist/actions/button/button.d.ts",
-      "import": "./src/actions/button/button.tsx"
-    },
-    "./button.css": "./src/actions/button/button.css",
-    "./checkbox": {
-      "types": "./dist/forms/checkbox/checkbox.d.ts",
-      "import": "./src/forms/checkbox/checkbox.tsx"
-    },
-    "./dialog": {
-      "types": "./dist/overlays/dialog/dialog.d.ts",
-      "import": "./src/overlays/dialog/dialog.tsx"
-    },
-    "./diff-changes": {
-      "types": "./dist/data-display/diff-changes/diff-changes.d.ts",
-      "import": "./src/data-display/diff-changes/diff-changes.tsx"
-    },
-    "./divider": {
-      "types": "./dist/layout/divider/divider.d.ts",
-      "import": "./src/layout/divider/divider.tsx"
-    },
-    "./field": {
-      "types": "./dist/forms/field/field.d.ts",
-      "import": "./src/forms/field/field.tsx"
-    },
-    "./file-tree.css": "./src/styles/file-tree.css",
-    "./icon": {
-      "types": "./dist/icons/icon/icon.d.ts",
-      "import": "./src/icons/icon/icon.tsx"
-    },
-    "./icon-button": {
-      "types": "./dist/actions/icon-button/icon-button.d.ts",
-      "import": "./src/actions/icon-button/icon-button.tsx"
-    },
-    "./inline-input": {
-      "types": "./dist/forms/inline-input/inline-input.d.ts",
-      "import": "./src/forms/inline-input/inline-input.tsx"
-    },
-    "./keybind": {
-      "types": "./dist/data-display/keybind/keybind.d.ts",
-      "import": "./src/data-display/keybind/keybind.tsx"
-    },
-    "./line-comment": {
-      "types": "./dist/data-display/line-comment/line-comment.d.ts",
-      "import": "./src/data-display/line-comment/line-comment.tsx"
-    },
-    "./loader": {
-      "types": "./dist/feedback/loader/loader.d.ts",
-      "import": "./src/feedback/loader/loader.tsx"
-    },
-    "./menu": {
-      "types": "./dist/navigation/menu/menu.d.ts",
-      "import": "./src/navigation/menu/menu.tsx"
-    },
-    "./progress-circle": {
-      "types": "./dist/feedback/progress-circle/progress-circle.d.ts",
-      "import": "./src/feedback/progress-circle/progress-circle.tsx"
-    },
-    "./project-avatar": {
-      "types": "./dist/data-display/project-avatar/project-avatar.d.ts",
-      "import": "./src/data-display/project-avatar/project-avatar.tsx"
-    },
-    "./radio": {
-      "types": "./dist/forms/radio/radio.d.ts",
-      "import": "./src/forms/radio/radio.tsx"
-    },
-    "./segmented-control": {
-      "types": "./dist/navigation/segmented-control/segmented-control.d.ts",
-      "import": "./src/navigation/segmented-control/segmented-control.tsx"
-    },
-    "./select": {
-      "types": "./dist/forms/select/select.d.ts",
-      "import": "./src/forms/select/select.tsx"
-    },
-    "./split-button": {
-      "types": "./dist/actions/split-button/split-button.d.ts",
-      "import": "./src/actions/split-button/split-button.tsx"
-    },
-    "./switch": {
-      "types": "./dist/forms/switch/switch.d.ts",
-      "import": "./src/forms/switch/switch.tsx"
-    },
-    "./tab-state-indicator": {
-      "types": "./dist/navigation/tab-state-indicator.d.ts",
-      "import": "./src/navigation/tab-state-indicator.tsx"
-    },
-    "./tabs": {
-      "types": "./dist/navigation/tabs/tabs.d.ts",
-      "import": "./src/navigation/tabs/tabs.tsx"
-    },
-    "./text-input": {
-      "types": "./dist/forms/text-input/text-input.d.ts",
-      "import": "./src/forms/text-input/text-input.tsx"
-    },
-    "./text-input.css": "./src/forms/text-input/text-input.css",
-    "./textarea": {
-      "types": "./dist/forms/textarea/textarea.d.ts",
-      "import": "./src/forms/textarea/textarea.tsx"
-    },
-    "./text-shimmer": {
-      "types": "./dist/typography/text-shimmer/text-shimmer.d.ts",
-      "import": "./src/typography/text-shimmer/text-shimmer.tsx"
-    },
-    "./toast": {
-      "types": "./dist/feedback/toast/toast.d.ts",
-      "import": "./src/feedback/toast/toast.tsx"
-    },
-    "./tooltip": {
-      "types": "./dist/overlays/tooltip/tooltip.d.ts",
-      "import": "./src/overlays/tooltip/tooltip.tsx"
-    },
-    "./wordmark": {
-      "types": "./dist/typography/wordmark/wordmark.d.ts",
-      "import": "./src/typography/wordmark/wordmark.tsx"
-    },
     "./*": {
       "types": "./dist/components/*.d.ts",
       "import": "./src/components/*.tsx"
@@ -190,7 +63,6 @@
       "import": "./src/storybook/fixtures.ts"
     },
     "./styles": "./src/styles/index.css",
-    "./styles/tokens": "./src/styles/tokens/index.css",
     "./styles/tailwind": "./src/styles/tailwind/index.css",
     "./theme": {
       "types": "./dist/theme/index.d.ts",
@@ -217,7 +89,13 @@
       "import": "./src/components/app-icons/types.ts"
     },
     "./fonts/*": "./src/assets/fonts/*",
-    "./audio/*": "./src/assets/audio/*"
+    "./audio/*": "./src/assets/audio/*",
+    "./v2/*.css": "./src/v2/components/*.css",
+    "./v2/*": {
+      "types": "./dist/v2/components/*.d.ts",
+      "import": "./src/v2/components/*.tsx"
+    },
+    "./v2/styles/*": "./src/v2/styles/*"
   },
   "scripts": {
     "build": "rm -rf dist && tsc -p tsconfig.build.json",
@@ -229,33 +107,49 @@
   },
   "devDependencies": {
     "@solidjs/meta": "0.29.4",
+    "@tailwindcss/vite": "4.1.11",
     "@tsconfig/node22": "22.0.2",
-    "@types/bun": "1.4.0",
+    "@types/bun": "1.3.13",
+    "@types/katex": "0.16.7",
+    "@types/luxon": "3.7.1",
     "@typescript/native-preview": "7.0.0-dev.20251207.1",
-    "solid-js": "1.9.15",
+    "solid-js": "1.9.10",
     "tailwindcss": "4.1.11",
+    "tw-animate-css": "1.4.0",
     "typescript": "5.8.2",
-    "vite": "7.3.6",
+    "vite": "7.1.4",
     "vite-plugin-icons-spritesheet": "3.0.1",
     "vite-plugin-solid": "2.11.10"
   },
   "dependencies": {
-    "@kobalte/core": "0.13.13",
+    "@kobalte/core": "0.13.11",
     "@pierre/diffs": "1.2.10",
-    "@solid-primitives/event-listener": "2.4.6",
-    "@solid-primitives/resize-observer": "2.2.0",
+    "@shikijs/transformers": "3.9.2",
+    "@solid-primitives/bounds": "0.1.3",
+    "@solid-primitives/event-listener": "2.4.5",
+    "@solid-primitives/media": "2.3.3",
+    "@solid-primitives/resize-observer": "2.1.3",
+    "@shikijs/stream": "4.2.0",
+    "diff": "8.0.2",
+    "dompurify": "3.3.1",
     "fuzzysort": "3.1.0",
-    "katex": "0.16.47",
-    "marked": "18.0.11",
+    "katex": "0.16.27",
+    "luxon": "3.6.1",
+    "marked": "18.0.7",
     "marked-shiki": "1.2.1",
+    "morphdom": "2.7.8",
     "motion": "12.34.5",
+    "motion-dom": "12.34.3",
+    "motion-utils": "12.29.2",
     "remeda": "2.26.0",
-    "shiki": "4.4.3",
+    "remend": "1.3.0",
+    "shiki": "4.2.0",
     "solid-list": "0.3.0",
-    "solid-sonner": "0.3.1"
+    "solid-sonner": "0.3.1",
+    "strip-ansi": "7.1.2"
   },
   "peerDependencies": {
     "@solidjs/meta": "^0.29.0",
-    "solid-js": "^1.9.8"
+    "solid-js": "^1.9.0"
   }
 }

package/src/{data-display/accordion → components}/accordion.css

@@ -36,24 +36,26 @@
         user-select: none;
 
         background-color: var(--v2-background-bg-base);
-        border: 1px solid var(--v2-border-border-base);
+        border: 0.5px solid var(--v2-border-border-base);
         border-radius: 0;
         box-shadow: none;
         overflow: clip;
         color: var(--v2-text-text-base);
         transition: background-color 0.15s ease;
 
+        /* text-12-regular */
         font-family: var(--font-family-sans);
         font-size: var(--font-size-small);
         font-style: normal;
         font-weight: var(--font-weight-regular);
-        line-height: var(--line-height-large);
+        line-height: var(--line-height-large); /* 166.667% */
         letter-spacing: var(--letter-spacing-normal);
 
-        @media (hover: hover) {
-          &:hover:not([data-disabled]) {
-            background-color: var(--v2-overlay-simple-overlay-hover);
-          }
+        &:hover:not([data-disabled]) {
+          background-color: var(--v2-overlay-simple-overlay-hover);
+        }
+        &:active:not([data-disabled]) {
+          background-color: var(--v2-overlay-simple-overlay-pressed);
         }
         &:focus-visible {
           outline: none;
@@ -80,7 +82,7 @@
 
     &[data-expanded] {
       [data-slot="accordion-content"] {
-        border: 1px solid var(--v2-border-border-base);
+        border: 0.5px solid var(--v2-border-border-base);
         border-top: 0;
         background-color: var(--v2-background-bg-layer-01);
       }
@@ -102,6 +104,30 @@
   }
 }
 
+body:not([data-new-layout]) [data-component="accordion"] {
+  [data-slot="accordion-item"] [data-slot="accordion-header"] [data-slot="accordion-trigger"] {
+    background-color: var(--background-stronger);
+    border-width: 1px;
+    border-color: var(--border-weak-base);
+    color: var(--text-strong);
+
+    &:hover:not([data-disabled]) {
+      background-color: var(--surface-base-hover);
+    }
+
+    &:active:not([data-disabled]) {
+      background-color: var(--surface-base-active);
+    }
+  }
+
+  [data-slot="accordion-item"][data-expanded] [data-slot="accordion-content"] {
+    border-width: 1px;
+    border-color: var(--border-weak-base);
+    border-top: 0;
+    background-color: var(--background-stronger);
+  }
+}
+
 @keyframes slideDown {
   from {
     height: 0;

package/src/{data-display/accordion → components}/accordion.tsx

@@ -1,17 +1,17 @@
-import { Content, Header, Item, Root, Trigger } from "@kobalte/core/accordion"
+import { Accordion as Kobalte } from "@kobalte/core/accordion"
 import { splitProps } from "solid-js"
 import type { ComponentProps, ParentProps } from "solid-js"
 
-export interface AccordionProps extends ComponentProps<typeof Root> {}
-export interface AccordionItemProps extends ComponentProps<typeof Item> {}
-export interface AccordionHeaderProps extends ComponentProps<typeof Header> {}
-export interface AccordionTriggerProps extends ComponentProps<typeof Trigger> {}
-export interface AccordionContentProps extends ComponentProps<typeof Content> {}
+export interface AccordionProps extends ComponentProps<typeof Kobalte> {}
+export interface AccordionItemProps extends ComponentProps<typeof Kobalte.Item> {}
+export interface AccordionHeaderProps extends ComponentProps<typeof Kobalte.Header> {}
+export interface AccordionTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {}
+export interface AccordionContentProps extends ComponentProps<typeof Kobalte.Content> {}
 
 function AccordionRoot(props: AccordionProps) {
   const [split, rest] = splitProps(props, ["class", "classList"])
   return (
-    <Root
+    <Kobalte
       {...rest}
       data-component="accordion"
       classList={{
@@ -25,7 +25,7 @@ function AccordionRoot(props: AccordionProps) {
 function AccordionItem(props: AccordionItemProps) {
   const [split, rest] = splitProps(props, ["class", "classList"])
   return (
-    <Item
+    <Kobalte.Item
       {...rest}
       data-slot="accordion-item"
       classList={{
@@ -39,7 +39,7 @@ function AccordionItem(props: AccordionItemProps) {
 function AccordionHeader(props: ParentProps<AccordionHeaderProps>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
   return (
-    <Header
+    <Kobalte.Header
       {...rest}
       data-slot="accordion-header"
       classList={{
@@ -48,14 +48,14 @@ function AccordionHeader(props: ParentProps<AccordionHeaderProps>) {
       }}
     >
       {split.children}
-    </Header>
+    </Kobalte.Header>
   )
 }
 
 function AccordionTrigger(props: ParentProps<AccordionTriggerProps>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
   return (
-    <Trigger
+    <Kobalte.Trigger
       {...rest}
       data-slot="accordion-trigger"
       classList={{
@@ -64,14 +64,14 @@ function AccordionTrigger(props: ParentProps<AccordionTriggerProps>) {
       }}
     >
       {split.children}
-    </Trigger>
+    </Kobalte.Trigger>
   )
 }
 
 function AccordionContent(props: ParentProps<AccordionContentProps>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
   return (
-    <Content
+    <Kobalte.Content
       {...rest}
       data-slot="accordion-content"
       classList={{
@@ -80,7 +80,7 @@ function AccordionContent(props: ParentProps<AccordionContentProps>) {
       }}
     >
       {split.children}
-    </Content>
+    </Kobalte.Content>
   )
 }
 

package/src/components/animated-number.css

@@ -17,7 +17,7 @@
   }
 
   [data-slot="animated-number-digit"] {
-    display: inline-grid;
+    display: inline-block;
     width: 1ch;
     height: 1em;
     line-height: 1em;
@@ -41,12 +41,19 @@
     mask-repeat: no-repeat;
   }
 
-  [data-slot="animated-number-static"],
   [data-slot="animated-number-strip"] {
-    grid-area: 1 / 1;
+    display: inline-flex;
+    flex-direction: column;
+    transform: translateY(calc(var(--animated-number-offset, 10) * -1em));
+    transition-property: transform;
+    transition-duration: var(--animated-number-duration, 560ms);
+    transition-timing-function: var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
+  }
+
+  [data-slot="animated-number-strip"][data-animating="false"] {
+    transition-duration: 0ms;
   }
 
-  [data-slot="animated-number-static"],
   [data-slot="animated-number-cell"] {
     display: inline-flex;
     align-items: center;
@@ -55,24 +62,6 @@
     height: 1em;
     line-height: 1em;
   }
-
-  [data-slot="animated-number-digit"][data-animating="true"] [data-slot="animated-number-static"] {
-    visibility: hidden;
-  }
-
-  [data-slot="animated-number-strip"] {
-    display: inline-flex;
-    flex-direction: column;
-    margin-top: calc(var(--animated-number-offset, 10) * -1em);
-    transition-property: margin-top;
-    transition-duration: var(--animated-number-duration, 560ms);
-    transition-timing-function: var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
-  }
-
-  [data-slot="animated-number-digit"][data-animating="false"] [data-slot="animated-number-strip"] {
-    transition-duration: 0ms;
-    visibility: hidden;
-  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -82,12 +71,5 @@
 
   [data-component="animated-number"] [data-slot="animated-number-strip"] {
     transition-duration: 0ms;
-    visibility: hidden;
-  }
-
-  [data-component="animated-number"]
-    [data-slot="animated-number-digit"][data-animating]
-    [data-slot="animated-number-static"] {
-    visibility: visible;
   }
 }

package/src/components/animated-number.tsx

@@ -43,10 +43,10 @@ function Digit(props: { value: number; direction: 1 | -1 }) {
   )
 
   return (
-    <span data-slot="animated-number-digit" data-animating={animating() ? "true" : "false"}>
-      <span data-slot="animated-number-static">{props.value}</span>
+    <span data-slot="animated-number-digit">
       <span
         data-slot="animated-number-strip"
+        data-animating={animating() ? "true" : "false"}
         onTransitionEnd={() => {
           setState("animating", false)
           setState("step", (value) => normalize(value) + 10)

package/src/components/avatar.css

@@ -0,0 +1,49 @@
+[data-component="avatar"] {
+  --avatar-bg: var(--color-surface-info-base);
+  --avatar-fg: var(--color-text-base);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border-weak-base);
+  font-family: var(--font-mono);
+  font-weight: 500;
+  text-transform: uppercase;
+  background-color: var(--avatar-bg);
+  color: var(--avatar-fg);
+}
+
+[data-component="avatar"][data-has-image] {
+  background-color: transparent;
+  border: none;
+}
+
+[data-component="avatar"][data-size="small"] {
+  width: 1.25rem;
+  height: 1.25rem;
+  font-size: 0.75rem;
+  line-height: 1;
+}
+
+[data-component="avatar"][data-size="normal"] {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+}
+
+[data-component="avatar"][data-size="large"] {
+  width: 2rem;
+  height: 2rem;
+  font-size: 1.25rem;
+  line-height: 2rem;
+}
+
+[data-component="avatar"] [data-slot="avatar-image"] {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+  border-radius: inherit;
+}

package/src/components/avatar.tsx

@@ -0,0 +1,55 @@
+import { type ComponentProps, splitProps, Show } from "solid-js"
+
+const segmenter =
+  typeof Intl !== "undefined" && "Segmenter" in Intl
+    ? new Intl.Segmenter(undefined, { granularity: "grapheme" })
+    : undefined
+
+function first(value: string) {
+  if (!value) return ""
+  if (!segmenter) return Array.from(value)[0] ?? ""
+  return segmenter.segment(value)[Symbol.iterator]().next().value?.segment ?? Array.from(value)[0] ?? ""
+}
+
+export interface AvatarProps extends ComponentProps<"div"> {
+  fallback: string
+  src?: string
+  background?: string
+  foreground?: string
+  size?: "small" | "normal" | "large"
+}
+
+export function Avatar(props: AvatarProps) {
+  const [split, rest] = splitProps(props, [
+    "fallback",
+    "src",
+    "background",
+    "foreground",
+    "size",
+    "class",
+    "classList",
+    "style",
+  ])
+  const src = split.src // did this so i can zero it out to test fallback
+  return (
+    <div
+      {...rest}
+      data-component="avatar"
+      data-size={split.size || "normal"}
+      data-has-image={src ? "" : undefined}
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+      style={{
+        ...(typeof split.style === "object" ? split.style : {}),
+        ...(!src && split.background ? { "--avatar-bg": split.background } : {}),
+        ...(!src && split.foreground ? { "--avatar-fg": split.foreground } : {}),
+      }}
+    >
+      <Show when={src} fallback={first(split.fallback)}>
+        {(src) => <img src={src()} draggable={false} data-slot="avatar-image" />}
+      </Show>
+    </div>
+  )
+}