@opencode-ai/ui 0.0.0-dev-17518 → 0.0.0-dev-17534

package/dist/i18n/en.d.ts

@@ -98,6 +98,8 @@ declare const source: {
     "ui.messagePart.context.search.other": string;
     "ui.messagePart.context.list.one": string;
     "ui.messagePart.context.list.other": string;
+    "ui.messagePart.context.match.one": string;
+    "ui.messagePart.context.match.other": string;
     "ui.list.loading": string;
     "ui.list.empty": string;
     "ui.list.clearFilter": string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/ui",
-  "version": "0.0.0-dev-17518",
+  "version": "0.0.0-dev-17534",
   "type": "module",
   "license": "MIT",
   "repository": {

package/src/components/accordion.css

@@ -104,30 +104,6 @@
   }
 }
 
-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/components/animated-number.css

@@ -17,7 +17,7 @@
   }
 
   [data-slot="animated-number-digit"] {
-    display: inline-block;
+    display: inline-grid;
     width: 1ch;
     height: 1em;
     line-height: 1em;
@@ -41,19 +41,12 @@
     mask-repeat: no-repeat;
   }
 
+  [data-slot="animated-number-static"],
   [data-slot="animated-number-strip"] {
-    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;
+    grid-area: 1 / 1;
   }
 
+  [data-slot="animated-number-static"],
   [data-slot="animated-number-cell"] {
     display: inline-flex;
     align-items: center;
@@ -62,6 +55,24 @@
     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) {
@@ -71,5 +82,12 @@
 
   [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">
+    <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-strip"
-        data-animating={animating() ? "true" : "false"}
         onTransitionEnd={() => {
           setState("animating", false)
           setState("step", (value) => normalize(value) + 10)

package/src/components/card.css

@@ -92,24 +92,3 @@
     padding-left: var(--card-indent);
   }
 }
-
-body:not([data-new-layout]) [data-component="card"] {
-  color: var(--text-strong);
-  --card-accent: var(--icon-active);
-
-  :where([data-card="title"], [data-slot="card-title"]) {
-    color: var(--text-strong);
-  }
-
-  :where([data-slot="card-title-icon"][data-placeholder]) [data-component="icon"] {
-    color: var(--text-weak);
-  }
-
-  :where([data-card="description"], [data-slot="card-description"]) {
-    color: var(--text-base);
-  }
-
-  &[data-variant="error"] {
-    --card-accent: var(--icon-critical-base) !important;
-  }
-}

package/src/components/tabs.css

@@ -685,10 +685,10 @@
   position: relative;
 }
 
-body[data-new-layout] #review-panel [data-component="tabs"],
-body[data-new-layout] #terminal-panel [data-component="tabs"],
-body[data-new-layout] #review-panel [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"],
-body[data-new-layout] #terminal-panel [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"] {
+:root body #review-panel [data-component="tabs"],
+:root body #terminal-panel [data-component="tabs"],
+:root body #review-panel [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"],
+:root body #terminal-panel [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"] {
   background-color: var(--v2-background-bg-base);
 
   [data-slot="tabs-list"] {
@@ -708,7 +708,7 @@ body[data-new-layout] #terminal-panel [data-component="tabs"][data-variant="norm
   }
 }
 
-body[data-new-layout] #review-panel [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"] {
+:root body #review-panel [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"] {
   [data-slot="tabs-list"] {
     height: 52px;
     padding-inline-end: 12px;
@@ -774,7 +774,7 @@ body[data-new-layout] #review-panel [data-component="tabs"][data-variant="normal
   }
 }
 
-body[data-new-layout] #review-panel [data-component="tabs"] .session-review-v2-tabs-bar {
+:root body #review-panel [data-component="tabs"] .session-review-v2-tabs-bar {
   width: 100%;
   min-width: 0;
   gap: 8px;
@@ -783,8 +783,9 @@ body[data-new-layout] #review-panel [data-component="tabs"] .session-review-v2-t
   background-color: var(--v2-background-bg-base);
 }
 
-body[data-new-layout] #review-panel [data-component="tabs"] .session-review-v2-tabs-bar [data-slot="tabs-list"],
-body[data-new-layout]
+:root body #review-panel [data-component="tabs"] .session-review-v2-tabs-bar [data-slot="tabs-list"],
+:root
+  body
   #review-panel
   [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"]
   .session-review-v2-tabs-bar
@@ -795,12 +796,7 @@ body[data-new-layout]
   border-bottom: none;
 }
 
-body[data-new-layout]
-  #review-panel
-  [data-component="tabs"]
-  .session-review-v2-tabs-bar
-  [data-slot="tabs-list"]
-  > .sticky {
+:root body #review-panel [data-component="tabs"] .session-review-v2-tabs-bar [data-slot="tabs-list"] > .sticky {
   padding-inline-end: 0;
 
   [data-component="icon-button-v2"] {
@@ -820,7 +816,8 @@ body[data-new-layout]
   }
 }
 
-body[data-new-layout]
+:root
+  body
   #review-panel
   [data-component="tabs"]
   .session-review-v2-tabs-bar
@@ -831,7 +828,8 @@ body[data-new-layout]
   inset-inline-end: 0;
 }
 
-body[data-new-layout]
+:root
+  body
   #review-panel
   [data-component="tabs"]
   .session-review-v2-tabs-bar
@@ -879,11 +877,11 @@ body[data-new-layout]
   }
 }
 
-body[data-new-layout] #review-panel [data-component="tabs"] .session-review-v2-open-in-app-slot {
+:root body #review-panel [data-component="tabs"] .session-review-v2-open-in-app-slot {
   flex-shrink: 0;
   margin-inline-start: auto;
 }
 
-body[data-new-layout] #review-panel [data-component="tabs"] .session-review-v2-open-in-app {
+:root body #review-panel [data-component="tabs"] .session-review-v2-open-in-app {
   flex-shrink: 0;
 }

package/src/i18n/en.ts

@@ -108,6 +108,8 @@ const source = {
   "ui.messagePart.context.search.other": "{{count}} searches",
   "ui.messagePart.context.list.one": "{{count}} list",
   "ui.messagePart.context.list.other": "{{count}} lists",
+  "ui.messagePart.context.match.one": "({{count}} match)",
+  "ui.messagePart.context.match.other": "({{count}} matches)",
 
   "ui.list.loading": "Loading",
   "ui.list.empty": "No results",

package/src/v2/styles/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;