@flamingo-stack/openframe-frontend-core 0.0.290 → 0.0.291-snapshot.20260618233000

package/src/components/features/paths-display.tsx

@@ -1,8 +1,7 @@
 'use client'
 
 import React from 'react'
-import { Copy } from 'lucide-react'
-import { Button } from '../ui/button'
+import { Copy02Icon } from '../icons-v2-generated/documents/copy-02-icon'
 import { cn } from '../../utils/cn'
 
 export interface PathsDisplayProps {
@@ -37,7 +36,7 @@ export interface PathsDisplayProps {
   showCopyButtons?: boolean
 
   /**
-   * Size of the copy icon (default: 'w-5 h-5')
+   * Size of the copy icon (default: 'w-6 h-6')
    */
   copyIconSize?: string
 }
@@ -78,7 +77,7 @@ export function PathsDisplay({
   description,
   className,
   showCopyButtons = true,
-  copyIconSize = 'w-5 h-5'
+  copyIconSize = 'w-6 h-6'
 }: PathsDisplayProps) {
   if (!paths || paths.length === 0) {
     return null
@@ -87,12 +86,12 @@ export function PathsDisplay({
   return (
     <div className={cn('flex flex-col gap-3', className)}>
       {title && (
-        <div className="text-ods-text-primary text-[16px] md:text-[18px]">
+        <div className="text-h4 text-ods-text-primary">
           {title}
         </div>
       )}
       {description && (
-        <div className="text-ods-text-secondary text-[14px] md:text-[16px]">
+        <div className="text-h6 text-ods-text-secondary">
           {description}
         </div>
       )}
@@ -100,20 +99,20 @@ export function PathsDisplay({
         {paths.map((path) => (
           <div
             key={path}
-            className="flex items-center justify-between p-4 border-b border-ods-border last:border-b-0"
+            className="flex items-center gap-4 p-4 border-b border-ods-border last:border-b-0"
           >
-            <span className="text-ods-text-primary font-medium text-[14px] md:text-[16px] font-mono break-all">
+            <span className="flex-1 min-w-0 text-h4 text-ods-text-primary truncate">
               {path}
             </span>
             {showCopyButtons && onCopyPath && (
-              <Button
-                variant="transparent"
-                size="small-legacy"
+              <button
+                type="button"
                 onClick={() => onCopyPath(path)}
-                className="ml-4 shrink-0"
+                aria-label={`Copy ${path}`}
+                className="shrink-0 rounded-md text-ods-text-secondary transition-colors hover:text-ods-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus"
               >
-                <Copy className={copyIconSize} />
-              </Button>
+                <Copy02Icon className={copyIconSize} />
+              </button>
             )}
           </div>
         ))}

package/src/components/ui/simple-markdown-renderer.tsx

@@ -156,25 +156,28 @@ function rehypeStripUnsafe() {
 
 /**
  * URL transformer that extends react-markdown's default safe-protocol
- * allowlist with `card://` — the non-standard scheme `remarkCardLinks`
- * emits for inline chat-card markers.
+ * allowlist with the two internal schemes the chat remark plugins emit:
+ *   - `card://`    — `remarkCardLinks`, for inline chat-card markers.
+ *   - `mention://` — `remarkMentionChips`, for inline `@marker:id` AI mentions.
  *
  * Without this, react-markdown 10's `defaultUrlTransform` strips the URL
  * to `""` before the `<a>` component override runs (the override's
- * `href.startsWith('card://')` check then fails and the marker leaks
- * through as literal text). All other URL schemes still go through the
- * default sanitizer — `javascript:`, `vbscript:`, `data:` (non-image), etc.
- * remain blocked.
+ * `href.startsWith('card://')` / `'mention://'` check then fails and the
+ * marker leaks through — as literal text, or as an empty-href link that the
+ * host's `NavLinkAnchor` resolves to a base URL). All other URL schemes still
+ * go through the default sanitizer — `javascript:`, `vbscript:`, `data:`
+ * (non-image), etc. remain blocked.
  *
- * Scope: `card://` is allowed ONLY for `href` attributes. If the LLM
+ * Scope: both schemes are allowed ONLY for `href` attributes. If the LLM
  * accidentally emits `![alt](card://type:id)` the URL still goes through
  * `defaultUrlTransform` (which strips it to `""`) so an `<img src="card://...">`
- * never reaches the DOM — broken request avoided. Per v6.1 §B.2.4: "the
- * `card://` scheme is internal — never network-fetched, never written to
- * attributes other than `href` for renderer dispatch."
+ * never reaches the DOM — broken request avoided. Per v6.1 §B.2.4: these
+ * schemes are internal — never network-fetched, never written to attributes
+ * other than `href` for renderer dispatch.
  */
 function cardAwareUrlTransform(url: string, key: string): string {
-  if (key === 'href' && typeof url === 'string' && url.startsWith('card://')) return url;
+  if (key === 'href' && typeof url === 'string' && (url.startsWith('card://') || url.startsWith('mention://')))
+    return url;
   return defaultUrlTransform(url);
 }
 

package/src/components/ui/tag.tsx

@@ -72,6 +72,15 @@ export interface TagProps
   icon?: React.ReactNode
   onClose?: () => void
   disabled?: boolean
+  /**
+   * Root element. Defaults to `'div'`. Pass `'span'` to render an INLINE tag
+   * that is valid inside phrasing content (e.g. a markdown `<p>` — a block
+   * `<div>` there is invalid HTML and breaks hydration). The variant base is
+   * already `inline-flex`, so the span lays out identically. Note: `onClose`
+   * renders a `<button>`, which is fine inside a `<span>` but not inside an
+   * `<a>` — don't combine `as="span"` + `onClose` inside an anchor.
+   */
+  as?: 'div' | 'span'
 }
 
 function Tag({
@@ -82,10 +91,11 @@ function Tag({
   className,
   labelClassName,
   disabled,
+  as: Comp = 'div',
   ...props
 }: TagProps) {
   return (
-    <div
+    <Comp
       className={cn(
         tagVariants({ variant }),
         disabled && disabledTagClasses,
@@ -117,7 +127,7 @@ function Tag({
           <XmarkCircleIcon className="size-4" />
         </button>
       )}
-    </div>
+    </Comp>
   )
 }
 

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

@@ -33,6 +33,18 @@
  *
  * Honors `prefers-reduced-motion` (jumps instantly) and cancels on genuine user
  * scroll intent (wheel / touch) so we never fight the user.
+ *
+ * WINDOW *OR* A SCROLLABLE ANCESTOR: the helper is not hard-wired to the window
+ * scroller. It walks up from the target to the nearest ancestor that is an
+ * actual scroll container (`overflow-y: auto | scroll | overlay` AND
+ * `scrollHeight > clientHeight`) and drives THAT element; only when none exists
+ * does it fall back to `window`. This is what makes it work inside app shells
+ * that put page content in a fixed-height `<main class="overflow-y-auto">`
+ * (e.g. OpenFrame's `AppLayout`) where the document/window never scrolls — the
+ * old window-only version was a silent no-op there. Note `overflow: clip` /
+ * `hidden` are deliberately NOT treated as scroll containers, so a list wrapper
+ * that uses `overflow-clip` only to round its corners still bubbles the scroll
+ * up to the real container (matches the `<HelpCenterCard>` list intent).
  */
 
 export interface ScrollElementIntoViewOptions {
@@ -70,6 +82,23 @@ function cancelActiveScroll(): void {
 
 const easeOutCubic = (t: number): number => 1 - Math.pow(1 - t, 3)
 
+/** Nearest ancestor that is a *real* scroll container, or `null` when the
+ *  window/document is the scroller. Only `auto | scroll | overlay` count —
+ *  `clip` / `hidden` are intentionally excluded (a wrapper using `overflow-clip`
+ *  purely to round corners must let the scroll bubble to the page). */
+function getScrollableAncestor(el: HTMLElement): HTMLElement | null {
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    const overflowY = getComputedStyle(node).overflowY
+    if (
+      (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') &&
+      node.scrollHeight > node.clientHeight
+    ) {
+      return node
+    }
+  }
+  return null
+}
+
 /**
  * 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
@@ -82,16 +111,29 @@ export function scrollElementIntoView(
   if (typeof window === 'undefined' || !target) return
   const { headerOffset = 0, behavior = 'smooth', adjustTargetY, durationMs = 320 } = options
 
+  // Pick the scroller ONCE: a fixed-height `<main overflow-y-auto>` shell scrolls
+  // the element, a plain document scrolls the window. The choice can't change
+  // mid-tween, so resolve it up front and route every read/write through it.
+  const container = getScrollableAncestor(target)
+  const readCurrent = (): number => (container ? container.scrollTop : window.scrollY)
+  const writeTo = (y: number): void => {
+    if (container) container.scrollTop = y
+    else window.scrollTo(0, y)
+  }
+
   // 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 raw = container
+      ? container.scrollTop +
+        (target.getBoundingClientRect().top - container.getBoundingClientRect().top) -
+        headerOffset
+      : target.getBoundingClientRect().top + window.scrollY - headerOffset
     const adjusted = adjustTargetY ? adjustTargetY(raw) : raw
-    const maxScroll = Math.max(
-      0,
-      document.documentElement.scrollHeight - window.innerHeight,
-    )
+    const maxScroll = container
+      ? Math.max(0, container.scrollHeight - container.clientHeight)
+      : Math.max(0, document.documentElement.scrollHeight - window.innerHeight)
     return Math.min(Math.max(0, adjusted), maxScroll)
   }
 
@@ -104,7 +146,7 @@ export function scrollElementIntoView(
 
   // Instant paths: a single synchronous write. No tween, no anchoring race.
   if (behavior === 'instant' || behavior === 'auto' || prefersReduced) {
-    window.scrollTo(0, computeTarget())
+    writeTo(computeTarget())
     return
   }
 
@@ -125,18 +167,18 @@ export function scrollElementIntoView(
 
   const step = (now: number) => {
     if (startY === null) {
-      startY = window.scrollY
+      startY = readCurrent()
       startTime = now
     }
     const targetY = computeTarget()
     const t = Math.min(1, (now - startTime) / durationMs)
     const y = startY + (targetY - startY) * easeOutCubic(t)
-    window.scrollTo(0, y)
+    writeTo(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())
+      writeTo(computeTarget())
       activeRaf = 0
       if (teardownActive) {
         teardownActive()