Merge branch 'dev' of https://github.com/sst/opencode into dev

packages/ui/src/components/diff-changes.tsx

@@ -16,16 +16,6 @@ export function DiffChanges(props: { diff: FileDiff | FileDiff[]; variant?: "def
   )
   const total = createMemo(() => (additions() ?? 0) + (deletions() ?? 0))
 
-  const countLines = (text: string) => {
-    if (!text) return 0
-    return text.split("\n").length
-  }
-
-  const totalBeforeLines = createMemo(() => {
-    if (!Array.isArray(props.diff)) return countLines(props.diff.before || "")
-    return props.diff.reduce((acc, diff) => acc + countLines(diff.before || ""), 0)
-  })
-
   const blockCounts = createMemo(() => {
     const TOTAL_BLOCKS = 5
 

packages/ui/src/components/markdown.css

@@ -4,6 +4,7 @@
   overflow: auto;
   scrollbar-width: none;
   color: var(--text-base);
+  text-wrap: pretty;
 
   /* text-14-regular */
   font-family: var(--font-family-sans);
@@ -34,4 +35,10 @@
     margin-top: 16px;
     margin-bottom: 16px;
   }
+
+  hr {
+    margin-top: 8px;
+    margin-bottom: 16px;
+    border-color: var(--border-weaker-base);
+  }
 }

packages/ui/src/styles/animations.css

@@ -0,0 +1,13 @@
+:root {
+  --animate-pulse: pulse-opacity 2s ease-in-out infinite;
+}
+
+@keyframes pulse-opacity {
+  0%,
+  100% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+}

packages/ui/src/styles/index.css

@@ -28,3 +28,4 @@
 @import "../components/typewriter.css" layer(components);
 
 @import "./utilities.css" layer(utilities);
+@import "./animations.css" layer(utilities);

packages/ui/src/styles/tailwind/index.css

@@ -64,6 +64,8 @@
   --shadow-xs: var(--shadow-xs);
   --shadow-md: var(--shadow-md);
   --shadow-xs-border-selected: var(--shadow-xs-border-selected);
+
+  --animate-pulse: var(--animate-pulse);
 }
 
 @import "./colors.css";

packages/ui/src/styles/utilities.css

@@ -48,71 +48,6 @@
   border-width: 0;
 }
 
-.scroller {
-  /* --fade-height: 1.5rem; */
-  /**/
-  /* --mask-top: linear-gradient(to bottom, transparent, black var(--fade-height)); */
-  /* --mask-bottom: linear-gradient(to top, transparent, black var(--fade-height)); */
-  /**/
-  /* mask-image: var(--mask-top), var(--mask-bottom); */
-  /* mask-repeat: no-repeat; */
-  /* mask-size: 100% var(--fade-height); */
-
-  animation: scroll-fade linear;
-  animation-timeline: scroll(self);
-}
-
-/* Define the keyframes for the mask.
-  These percentages now map to scroll positions:
-  0% = Scrolled to the top
-  100% = Scrolled to the bottom
-*/
-@keyframes scroll-fade {
-  /* At the very top (0% scroll) */
-  0% {
-    mask-image: linear-gradient(
-      to bottom,
-      black 90%,
-      /* Opaque, but start fade to bottom */ transparent 100%
-    );
-  }
-
-  /* A small amount scrolled (e.g., 5%)
-    This is where the top fade should be fully visible.
-  */
-  5% {
-    mask-image: linear-gradient(
-      to bottom,
-      transparent 0%,
-      black 10%,
-      /* Fade-in top */ black 90%,
-      /* Fade-out bottom */ transparent 100%
-    );
-  }
-
-  /* Nearing the bottom (e.g., 95%)
-    The bottom fade should start disappearing.
-  */
-  95% {
-    mask-image: linear-gradient(
-      to bottom,
-      transparent 0%,
-      black 10%,
-      /* Fade-in top */ black 90%,
-      /* Fade-out bottom */ transparent 100%
-    );
-  }
-
-  /* At the very bottom (100% scroll) */
-  100% {
-    mask-image: linear-gradient(
-      to bottom,
-      transparent 0%,
-      black 10% /* Opaque, but start fade from top */
-    );
-  }
-}
-
 .truncate-start {
   text-overflow: ellipsis;
   overflow: hidden;