@flamingo-stack/openframe-frontend-core 0.0.216 → 0.0.217

package/src/components/ui/ticket-attachments-list.tsx

@@ -16,10 +16,15 @@ export interface TicketAttachment {
 export interface TicketAttachmentsListProps {
   attachments: TicketAttachment[]
   className?: string
+  /** `compact` shrinks padding / icon / text / download-button for
+   *  in-message rendering (the ticket conversation feed). Default keeps the
+   *  roomier full-row layout for any other surface. */
+  size?: 'default' | 'compact'
 }
 
-export function TicketAttachmentsList({ attachments, className }: TicketAttachmentsListProps) {
+export function TicketAttachmentsList({ attachments, className, size = 'default' }: TicketAttachmentsListProps) {
   if (attachments.length === 0) return null
+  const compact = size === 'compact'
 
   return (
     <div className={cn("rounded-[6px] border border-ods-border overflow-hidden", className)}>
@@ -27,7 +32,8 @@ export function TicketAttachmentsList({ attachments, className }: TicketAttachme
         <div
           key={attachment.id}
           className={cn(
-            "flex items-center gap-4 px-4 py-3 bg-ods-card",
+            "flex items-center bg-ods-card",
+            compact ? "gap-2 px-2 py-1.5" : "gap-4 px-4 py-3",
             index < attachments.length - 1 && "border-b border-ods-border",
           )}
         >
@@ -35,17 +41,29 @@ export function TicketAttachmentsList({ attachments, className }: TicketAttachme
             <SquareAvatar
               src={attachment.thumbnailSrc}
               alt={attachment.fileName}
-              size="md"
+              size={compact ? "sm" : "md"}
               className="shrink-0"
             />
           ) : (
-            <div className="shrink-0 size-10 flex items-center justify-center rounded-[6px] bg-ods-card border border-ods-border">
-              <FileIcon className="size-6 text-ods-text-secondary" />
+            <div
+              className={cn(
+                "shrink-0 flex items-center justify-center rounded-[6px] bg-ods-card border border-ods-border",
+                compact ? "size-8" : "size-10",
+              )}
+            >
+              <FileIcon className={cn("text-ods-text-secondary", compact ? "size-4" : "size-6")} />
             </div>
           )}
           <div className="flex-1 min-w-0 overflow-hidden">
-            <p className="text-h4 text-ods-text-primary truncate" title={attachment.fileName}>{attachment.fileName}</p>
-            <p className="text-h6 text-ods-text-secondary">{attachment.fileSize}</p>
+            <p
+              className={cn("text-ods-text-primary truncate", compact ? "text-h5" : "text-h4")}
+              title={attachment.fileName}
+            >
+              {attachment.fileName}
+            </p>
+            {attachment.fileSize && (
+              <p className="text-h6 text-ods-text-secondary">{attachment.fileSize}</p>
+            )}
           </div>
           {attachment.onDownload && (
             <button
@@ -54,7 +72,7 @@ export function TicketAttachmentsList({ attachments, className }: TicketAttachme
               className="shrink-0 text-ods-text-secondary hover:text-ods-text-primary transition-colors"
               aria-label={`Download ${attachment.fileName}`}
             >
-              <Download className="size-6" />
+              <Download className={compact ? "size-4" : "size-6"} />
             </button>
           )}
         </div>

package/src/styles/app-globals.css

@@ -39,11 +39,24 @@ img {
 
 html {
   background-color: var(--color-bg);
+  /* Defense-in-depth for programmatic smooth scrolls (see
+     `utils/scroll-into-view.ts`). Browser SCROLL ANCHORING issues a synchronous
+     scrollTop correction when content is inserted/removed (e.g. a ticket drawer
+     expanding) to keep the anchored element stable — and per CSSOM-View that
+     correction ABORTS any in-flight scroll. That cancelled our smooth
+     scroll-to-card on every open after the first (anchoring is suppressed only
+     at scrollY=0, so the first open looked smooth and every repeat jumped).
+     Disabling anchoring on the document scroller removes the correction
+     entirely. Put on html/body (the page scroller), NOT a descendant — a child
+     can't re-enable it for an ancestor scroll container. The self-driven rAF
+     tween in scroll-into-view.ts is the primary fix; this is belt-and-braces. */
+  overflow-anchor: none;
 }
 
 body {
   background-color: var(--color-bg);
   color: var(--color-text-primary);
+  overflow-anchor: none;
 }
 
 /* Light mode specific styles (used in alternatives-list.tsx) */

package/src/utils/scroll-into-view.ts

@@ -1,74 +1,148 @@
 /**
- * `scrollElementIntoView` — canonical "smooth scroll element to top
- * of viewport, account for sticky chrome, optionally adjust for
- * known layout shifts" helper.
+ * `scrollElementIntoView` — canonical "scroll an element to the top of the
+ * viewport, account for sticky chrome, survive layout shifts" helper.
  *
- * Before this util existed, ~3 different call sites in the lib + hub
- * had the same 5-line snippet copy-pasted with subtle differences:
+ * One shared implementation so every caller (the ticket drawer expand, the
+ * hub's `useUnifiedNav` / `use-nav-link` hash scroll, doc-tree, delivery
+ * `?focus=`, sticky-section-nav, …) inherits the SAME cancellation-proof
+ * motion.
  *
- *   - `useUnifiedNav` same-URL re-scroll branch (hub)
- *   - `<HelpCenterCard>` click-to-expand (lib, with cross-row
- *     layout-shift adjustment)
- *   - Future ticket-row / docs anchor scrolls
+ * WHY A SELF-DRIVEN rAF TWEEN INSTEAD OF `window.scrollTo({behavior:'smooth'})`:
+ * the native smooth scroll is CANCELLABLE, and in real pages it gets cancelled
+ * constantly:
  *
- * The canonical pattern is `window.scrollTo({top, behavior:'smooth'})`
- * with a pre-computed pixel target — NOT `element.scrollIntoView()`.
- * Pre-computing the target lets the browser run a clean uninterrupted
- * smooth animation to a fixed pixel value. `scrollIntoView` re-targets
- * continuously as the page layout shifts during the animation, which
- * causes visible jitter when content above the target is also moving
- * (a sibling collapsing, an async image loading, …).
+ *   - Browser SCROLL ANCHORING: when content is inserted/removed above or
+ *     around the target (a collapsible drawer expanding, an async image
+ *     loading, a list re-rendering) the browser issues a synchronous scrollTop
+ *     correction to keep the anchored element stable. Per CSSOM-View "perform a
+ *     scroll" step 1 ("abort any ongoing smooth scroll"), that correction
+ *     ABORTS an in-flight native smooth scroll — so it lands as an instant jump.
+ *     Anchoring is suppressed when the scroll offset is 0, which is exactly why
+ *     a native smooth scroll appears to work the FIRST time (page at top) and
+ *     jumps on every repeat (page already scrolled). This was a multi-day
+ *     "smooth only works once" bug on the /tickets drawer.
+ *   - A second programmatic scroll on the same frame, or a `focus()` without
+ *     `{preventScroll:true}`, cancels it the same way.
  *
- * The `adjustTargetY` callback is the escape hatch for cases where
- * the consumer KNOWS about an upcoming layout shift and can compute
- * the correct FINAL target before the animation starts. Example: in
- * `HelpCenterCard`, clicking row B while row A above is currently
- * expanded — A's drawer collapses simultaneously with B's expansion,
- * shifting B's tile up by A's drawer height. The consumer passes
- * `adjustTargetY: raw => raw - getAboveDrawerHeight()` and the
- * browser smooth-scrolls to the post-collapse position directly.
+ * A tween that re-asserts the position with INSTANT writes every frame is
+ * immune: there is no "ongoing native smooth scroll" for anchoring/focus to
+ * abort, and any correction that lands between our frames is overwritten on the
+ * next frame. We also RECOMPUTE the target each frame, so an element whose
+ * final position is still settling (drawer still expanding, images loading)
+ * is tracked to its resting place instead of animating to a stale pixel.
+ *
+ * Honors `prefers-reduced-motion` (jumps instantly) and cancels on genuine user
+ * scroll intent (wheel / touch) so we never fight the user.
  */
 
 export interface ScrollElementIntoViewOptions {
-  /** Pixels to subtract from the target element's `top` so it lands
-   *  BELOW sticky chrome. Defaults to 0. Pass `96` (matches
-   *  `scroll-mt-24`) for the standard hub header offset. */
+  /** Pixels to subtract from the target element's `top` so it lands BELOW
+   *  sticky chrome. Defaults to 0. Pass `96` for the standard hub header. */
   headerOffset?: number
-  /** Scroll animation style. Defaults to `'smooth'`. Use `'instant'`
-   *  for imperative jumps where animation would feel laggy (deep
-   *  link land, programmatic focus moves). */
+  /** `'smooth'` (default) runs the self-driven tween; `'instant'` / `'auto'`
+   *  jump in one synchronous write (deep-link land, programmatic focus moves). */
   behavior?: ScrollBehavior
-  /** Optional adjustment applied to the computed pixel target. The
-   *  callback receives the "raw" Y (`element.top + scrollY -
-   *  headerOffset`) and returns the FINAL pixel target. Use this
-   *  when the caller knows about a layout shift that will happen
-   *  between the call and the animation completing — the browser's
-   *  smooth-scroll commits to a single pixel value, so providing the
-   *  post-shift target up front lands the element correctly even as
-   *  content above it moves. */
+  /** Optional adjustment applied to the computed pixel target each frame. The
+   *  callback receives the "raw" Y (`element.top + scrollY - headerOffset`) and
+   *  returns the FINAL target. Use when the caller knows about a layout shift
+   *  (e.g. a sibling drawer collapsing) the geometry can't yet reflect. */
   adjustTargetY?: (rawTargetY: number) => number
+  /** Tween duration in ms (smooth only). Default 320. */
+  durationMs?: number
+}
+
+/** Module-level handle to the in-flight tween so a new call (or a user
+ *  gesture) cancels the previous one — only ever one page-scroll animation at
+ *  a time. */
+let activeRaf = 0
+let teardownActive: (() => void) | null = null
+
+function cancelActiveScroll(): void {
+  if (activeRaf) {
+    cancelAnimationFrame(activeRaf)
+    activeRaf = 0
+  }
+  if (teardownActive) {
+    teardownActive()
+    teardownActive = null
+  }
 }
 
+const easeOutCubic = (t: number): number => 1 - Math.pow(1 - t, 3)
+
 /**
- * Scroll the page so `target` lands at the top of the viewport,
- * accounting for sticky chrome via `headerOffset`. Returns void; the
- * scroll runs async via the browser's smooth-scroll engine.
- *
- * Accepts:
- *   - `HTMLElement` — direct reference (most common from `useRef`).
- *   - `null` / `undefined` — no-op so callers can pass refs without
- *     defensive branching.
- *
- * SSR-safe: short-circuits when `window` is undefined.
+ * Scroll the page so `target` lands at the top of the viewport (below sticky
+ * chrome via `headerOffset`). SSR-safe; `null`/`undefined` target is a no-op so
+ * callers can pass refs without defensive branching.
  */
 export function scrollElementIntoView(
   target: HTMLElement | null | undefined,
   options: ScrollElementIntoViewOptions = {},
 ): void {
   if (typeof window === 'undefined' || !target) return
-  const { headerOffset = 0, behavior = 'smooth', adjustTargetY } = options
-  const rawTargetY =
-    target.getBoundingClientRect().top + window.scrollY - headerOffset
-  const finalY = adjustTargetY ? adjustTargetY(rawTargetY) : rawTargetY
-  window.scrollTo({ top: Math.max(0, finalY), behavior })
+  const { headerOffset = 0, behavior = 'smooth', adjustTargetY, durationMs = 320 } = options
+
+  // Target is recomputed every frame: the row's absolute position can move as
+  // the page reflows (a sibling drawer collapsing) and the reachable max grows
+  // as the just-opened drawer expands. Clamp to the LIVE max each frame.
+  const computeTarget = (): number => {
+    const raw = target.getBoundingClientRect().top + window.scrollY - headerOffset
+    const adjusted = adjustTargetY ? adjustTargetY(raw) : raw
+    const maxScroll = Math.max(
+      0,
+      document.documentElement.scrollHeight - window.innerHeight,
+    )
+    return Math.min(Math.max(0, adjusted), maxScroll)
+  }
+
+  // Any prior animation loses — one page scroll at a time.
+  cancelActiveScroll()
+
+  const prefersReduced =
+    typeof window.matchMedia === 'function' &&
+    window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+  // Instant paths: a single synchronous write. No tween, no anchoring race.
+  if (behavior === 'instant' || behavior === 'auto' || prefersReduced) {
+    window.scrollTo(0, computeTarget())
+    return
+  }
+
+  // Smooth: self-driven tween with instant per-frame writes (anchoring-proof).
+  let startY: number | null = null
+  let startTime = 0
+
+  // Bail the moment the user takes over with a real scroll gesture — we must
+  // never fight them. (Not keydown: the ticket composer auto-focuses on open,
+  // and typing there should not abort the scroll.)
+  const onUserGesture = () => cancelActiveScroll()
+  window.addEventListener('wheel', onUserGesture, { passive: true })
+  window.addEventListener('touchmove', onUserGesture, { passive: true })
+  teardownActive = () => {
+    window.removeEventListener('wheel', onUserGesture)
+    window.removeEventListener('touchmove', onUserGesture)
+  }
+
+  const step = (now: number) => {
+    if (startY === null) {
+      startY = window.scrollY
+      startTime = now
+    }
+    const targetY = computeTarget()
+    const t = Math.min(1, (now - startTime) / durationMs)
+    const y = startY + (targetY - startY) * easeOutCubic(t)
+    window.scrollTo(0, y)
+    if (t < 1) {
+      activeRaf = requestAnimationFrame(step)
+    } else {
+      // Final exact write in case easing left a sub-pixel gap, then teardown.
+      window.scrollTo(0, computeTarget())
+      activeRaf = 0
+      if (teardownActive) {
+        teardownActive()
+        teardownActive = null
+      }
+    }
+  }
+  activeRaf = requestAnimationFrame(step)
 }