@opencode/ui 2.0.2 → 2.0.3

package/dist/components/scroll-view.d.ts

@@ -14,6 +14,10 @@ export interface ScrollViewProps extends ComponentProps<"div"> {
     thumbContainer?: HTMLElement;
     /** Element whose hover reveals the thumb. Defaults to the ScrollView root when unset. */
     thumbHoverTarget?: HTMLElement;
+    /** Reconcile native scroll geometry before keyboard or scrollbar navigation reads it. */
+    onBeforeScroll?: () => void;
+    /** Offset/extent correction for a virtualized vertical scrollbar. */
+    verticalScrollAdjustment?: number;
 }
 export declare const scrollKey: (event: Pick<KeyboardEvent, "key" | "altKey" | "ctrlKey" | "metaKey" | "shiftKey">) => "end" | "home" | "page-down" | "page-up" | "up" | "down" | undefined;
 export declare function canScrollKey(element: HTMLElement, key: NonNullable<ReturnType<typeof scrollKey>>): boolean;

package/dist/icons/icon/icon.d.ts

@@ -162,6 +162,14 @@ declare const icons: {
         viewBox: string;
         body: string;
     };
+    "graduation-cap": {
+        viewBox: string;
+        body: string;
+    };
+    "code-slash": {
+        viewBox: string;
+        body: string;
+    };
     trash: {
         viewBox: string;
         body: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode/ui",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "type": "module",
   "license": "MIT",
   "repository": {

package/src/components/scroll-view.tsx

@@ -20,6 +20,10 @@ export interface ScrollViewProps extends ComponentProps<"div"> {
   thumbContainer?: HTMLElement
   /** Element whose hover reveals the thumb. Defaults to the ScrollView root when unset. */
   thumbHoverTarget?: HTMLElement
+  /** Reconcile native scroll geometry before keyboard or scrollbar navigation reads it. */
+  onBeforeScroll?: () => void
+  /** Offset/extent correction for a virtualized vertical scrollbar. */
+  verticalScrollAdjustment?: number
 }
 
 export const scrollKey = (event: Pick<KeyboardEvent, "key" | "altKey" | "ctrlKey" | "metaKey" | "shiftKey">) => {
@@ -124,6 +128,8 @@ export function ScrollView(props: ScrollViewProps) {
       "thumbVisibility",
       "thumbContainer",
       "thumbHoverTarget",
+      "onBeforeScroll",
+      "verticalScrollAdjustment",
       "style",
     ],
     [
@@ -189,17 +195,19 @@ export function ScrollView(props: ScrollViewProps) {
     const minThumbSize = 32
 
     if (vertical()) {
+      const adjustment = local.verticalScrollAdjustment ?? 0
+      const scrollHeight = viewportRef.scrollHeight + adjustment
       const trackSize = Math.max(0, (thumbMount()?.clientHeight || viewportRef.clientHeight) - trackPadding * 2)
       const size = trackSize
-        ? Math.min(trackSize, Math.max((viewportRef.clientHeight / viewportRef.scrollHeight) * trackSize, minThumbSize))
+        ? Math.min(trackSize, Math.max((viewportRef.clientHeight / scrollHeight) * trackSize, minThumbSize))
         : 0
-      const maxScroll = viewportRef.scrollHeight - viewportRef.clientHeight
+      const maxScroll = scrollHeight - viewportRef.clientHeight
       const maxStart = trackSize - size
       setState("showVerticalThumb", maxScroll > 0)
       setState("verticalThumbSize", size)
       setState(
         "verticalThumbStart",
-        trackPadding + (maxScroll > 0 ? (viewportRef.scrollTop / maxScroll) * maxStart : 0),
+        trackPadding + (maxScroll > 0 ? ((viewportRef.scrollTop + adjustment) / maxScroll) * maxStart : 0),
       )
     } else {
       setState("showVerticalThumb", false)
@@ -263,9 +271,17 @@ export function ScrollView(props: ScrollViewProps) {
     })
   })
 
+  const prepareScroll = () => {
+    if (local.onBeforeScroll) {
+      local.onBeforeScroll()
+      updateThumb()
+    }
+  }
+
   const onThumbPointerDown = (axis: "vertical" | "horizontal", e: PointerEvent) => {
     e.preventDefault()
     e.stopPropagation()
+    prepareScroll()
     setState("dragging", axis)
     const thumb = axis === "vertical" ? verticalThumbRef : horizontalThumbRef
     const grabOffset =
@@ -277,6 +293,7 @@ export function ScrollView(props: ScrollViewProps) {
     thumb.setPointerCapture(e.pointerId)
 
     const onPointerMove = (e: PointerEvent) => {
+      prepareScroll()
       const vertical = axis === "vertical"
       const rtl = !vertical && getComputedStyle(viewportRef).direction === "rtl"
       const offset = scrollOffsetFromThumbPointer({
@@ -355,10 +372,23 @@ export function ScrollView(props: ScrollViewProps) {
       return
     }
     const next = scrollKey(e)
-    if (!next) return
-    if (!isScrollKeyTarget(e.target, next)) return
-    if (scrollKeyOwner(viewportRef, e.target, next) !== viewportRef) return
+    // Modified navigation (for example Ctrl+Home) stays native, but must read
+    // the same reconciled geometry as the keys handled by this component.
+    const intent =
+      next ??
+      scrollKey({
+        key: e.key,
+        shiftKey: e.key === " " && e.shiftKey,
+        altKey: false,
+        ctrlKey: false,
+        metaKey: false,
+      })
+    if (!intent) return
+    if (!isScrollKeyTarget(e.target, intent)) return
+    if (scrollKeyOwner(viewportRef, e.target, intent) !== viewportRef) return
 
+    prepareScroll()
+    if (!next) return
     const scrollAmount = viewportRef.clientHeight * 0.8
     const lineAmount = 40
 

package/src/icons/icon/icon.tsx

@@ -164,6 +164,14 @@ const icons = {
     viewBox: "0 0 16 16",
     body: `<path d="M14.5 9.8333V13.5H1.5V2.5H7.1667M9.5 2.5V7.5H14.5V2.5H9.5Z" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="square"/>`,
   },
+  "graduation-cap": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M12.3327 7.50065V11.0007L7.99935 13.6673L3.66602 11.0007V7.50065M14.3327 9.83398V6.16732M7.99935 2.33398L1.66602 6.00065L7.99935 10.0007L14.3327 6.00065L7.99935 2.33398Z" stroke="currentColor" stroke-linecap="square"/>`,
+  },
+  "code-slash": {
+    viewBox: "0 0 16 16",
+    body: `<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0812 2.10803L6.55974 14.0809L5.92016 13.8928L9.44161 1.91992L10.0812 2.10803ZM4.13793 4.97275L1.44666 8.00045L4.13793 11.0281L3.63966 11.471L0.554688 8.00045L3.63966 4.52984L4.13793 4.97275ZM12.3617 4.52984L15.4467 8.00045L12.3617 11.471L11.8634 11.0281L14.5547 8.00045L11.8634 4.97275L12.3617 4.52984Z" fill="currentColor"/>`,
+  },
   trash: {
     viewBox: "0 0 20 20",
     body: `<path d="M4.58342 17.9134L4.58369 17.4134L4.22787 17.5384L4.22766 18.0384H4.58342V17.9134ZM15.4167 17.9134V18.0384H15.7725L15.7723 17.5384L15.4167 17.9134ZM2.08342 3.95508V3.45508H1.58342V3.95508H2.08342V4.45508V3.95508ZM17.9167 4.45508V4.95508H18.4167V4.45508H17.9167V3.95508V4.45508ZM4.16677 4.58008L3.66701 4.5996L4.22816 17.5379L4.72792 17.4934L5.22767 17.4489L4.66652 4.54055L4.16677 4.58008ZM4.58342 18.0384V17.9134H15.4167V18.0384V18.5384H4.58342V18.0384ZM15.4167 17.9134L15.8332 17.5379L16.2498 4.5996L15.7501 4.58008L15.2503 4.56055L14.8337 17.4989L15.4167 17.9134ZM15.8334 4.58008V4.08008H4.16677V4.58008V5.08008H15.8334V4.58008ZM2.08342 4.45508V4.95508H4.16677V4.58008V4.08008H2.08342V4.45508ZM15.8334 4.58008V5.08008H17.9167V4.45508V3.95508H15.8334V4.58008ZM6.83951 4.35149L7.432 4.55047C7.79251 3.47701 8.80699 2.70508 10.0001 2.70508V2.20508V1.70508C8.25392 1.70508 6.77335 2.83539 6.24702 4.15251L6.83951 4.35149ZM10.0001 2.20508V2.70508C11.1932 2.70508 12.2077 3.47701 12.5682 4.55047L13.1607 4.35149L13.7532 4.15251C13.2269 2.83539 11.7463 1.70508 10.0001 1.70508V2.20508Z" fill="currentColor"/>`,