@flamingo-stack/openframe-frontend-core 0.0.533 → 0.0.534-snapshot.20260812085314

package/src/components/chat/chat-input.tsx

@@ -168,6 +168,13 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
   } = rest as typeof rest & { rows?: number }
 
   const [value, setValue] = useState('')
+  // Whether the editor currently holds at least one committed mention chip —
+  // it alone needs the tall line box (see the editor's className). Read from the
+  // DOM, NOT by testing the draft against `MENTION_GLOBAL`: that regex also
+  // matches ordinary typed text (`meet @3:00`, `@prod:us-east`), which would
+  // switch the editor to a 36px line box with no chip on screen. Chips are only
+  // ever created by `rebuildDom`, so the two writers below cover every path.
+  const [hasChips, setHasChips] = useState(false)
   const [focused, setFocused] = useState(false)
   const [isStopping, setIsStopping] = useState(false)
   // The ghost preview is dismissed as soon as the user edits the draft (typing
@@ -224,7 +231,12 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
         if (typeof caret === 'number') placeCaretAtOffset(el, caret)
         else placeCaretAtEnd(el)
       }
+      setHasChips(el.querySelector('[data-token]') !== null)
     }
+    // Advance the mirror HERE, not only on the next render: `fire` clears the
+    // draft and then reads it back within the same tick to decide whether a
+    // refused send may restore it.
+    valueRef.current = next
     setValue(next)
   }, [])
 
@@ -233,19 +245,31 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
     (message: string) => {
       const can = (message.length > 0 || allowEmptySend) && !sending && !disabled
       if (!can || !onSend) return
-      const result = onSend(message)
-      const done = () => {
-        metaRef.current = new Map()
-        applyValue('')
-        shouldRefocusRef.current = true
-        focusEditor()
+      // Clear FIRST and put it back only if the host refuses, rather than
+      // clearing once the send settles. The editor stays typable while `sending`
+      // (see `contentEditable` below), and a host whose `onSend` is async —
+      // `TicketReplyComposer` awaits a round trip — leaves a window in which the
+      // user starts their next message; a deferred clear would silently delete
+      // it. Restoring is guarded on the box still being empty for the same
+      // reason. `applyValue` advances `valueRef` synchronously, so the guard
+      // reads the cleared draft even when `onSend` refuses in the same tick.
+      const sentMeta = metaRef.current
+      metaRef.current = new Map()
+      applyValue('')
+      shouldRefocusRef.current = true
+      focusEditor()
+      const restore = () => {
+        if (valueRef.current.length > 0) return
+        metaRef.current = sentMeta
+        applyValue(message)
       }
+      const result = onSend(message)
       if (result instanceof Promise) {
         void result.then((ok) => {
-          if (ok !== false) done()
+          if (ok === false) restore()
         })
-      } else if (result !== false) {
-        done()
+      } else if (result === false) {
+        restore()
       }
     },
     [allowEmptySend, sending, disabled, onSend, focusEditor, applyValue],
@@ -351,6 +375,9 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
   const syncFromDom = useCallback(() => {
     const el = editorRef.current
     if (!el) return
+    // Typing can DELETE a chip (they are atomic `contentEditable=false` nodes),
+    // so the flag has to be re-read here too, not just where chips are built.
+    setHasChips(el.querySelector('[data-token]') !== null)
     setValue(serialize(el))
   }, [])
 
@@ -452,14 +479,13 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
   const hasContent = value.trim().length > 0 || allowEmptySend
   const sendDisabled = sending || disabled || !hasContent
   const isEmpty = value.length === 0
-  const isDisabled = sending || disabled
   // Non-destructive ghost preview (e.g. a hovered quick-action's full prompt).
   // Shown whenever a `previewText` is set (even over an existing draft): the
   // editor's real value is NEVER touched — it's just visually hidden behind the
   // ghost while previewing, and reappears verbatim once `previewText` clears.
   // Declarative, no `setValue` / draft save-restore. Suppressed the moment the
   // user edits the draft (`previewDismissed`) so typing is never hidden.
-  const showPreview = !isDisabled && !!previewText && !previewDismissed
+  const showPreview = !sending && !disabled && !!previewText && !previewDismissed
 
   return (
     <div
@@ -493,24 +519,28 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
             }}
             className={cn(
               // `items-center` keeps the empty single-line text AND a mention chip
-              // vertically centered the same way. `py-1.5` (6px) pairs with the
-              // editor's `leading-9` (36px) → a single line is exactly 48px
-              // (36 + 2*6). The 36px line box is just barely above the 32px chip
-              // (incl. its ~3.5px vertical-align overhead), so there's almost no
-              // slack for the chip to drift in → it reads as centered, and the row
-              // never overflows past 48px.
+              // vertically centered the same way. With a chip in the box, `py-1.5`
+              // (6px) pairs with the editor's `leading-9` (36px) → that row is
+              // 36 + 2*6 = 48px. The 36px line box is just barely above the 32px
+              // chip (incl. its ~3.5px vertical-align overhead), so there's almost
+              // no slack for the chip to drift in → it reads as centered.
+              // A chipless row is shorter than its content box and the `min-h-*`
+              // here is what sets its height: 48px from `md` up, 44px below.
               "flex w-full items-center gap-2 px-3 py-1.5 min-h-11 md:min-h-12 cursor-text group transition-colors duration-200",
               !hideBorder && "rounded-[6px] border bg-ods-card border-ods-border",
-              !hideBorder && (focused ? "border-ods-accent" : !isDisabled && "hover:bg-ods-bg-hover hover:border-ods-border-hover"),
-              !hideBorder && isDisabled && "!cursor-not-allowed bg-ods-bg",
+              !hideBorder && (focused ? "border-ods-accent" : !disabled && "hover:bg-ods-bg-hover hover:border-ods-border-hover"),
+              !hideBorder && disabled && "!cursor-not-allowed bg-ods-bg",
               hideBorder && "bg-transparent",
             )}
           >
             {startIcon && <span className="flex h-6 shrink-0 items-center">{startIcon}</span>}
 
             <div className="relative flex-1 min-w-0">
+              {/* No chip-line override on the placeholder: it only renders while
+                  the draft is EMPTY, so the editor is always on its plain line
+                  box here. */}
               {isEmpty && !showPreview && (
-                <span className="pointer-events-none absolute left-0 top-0 select-none text-h4 !leading-9 text-ods-text-secondary">
+                <span className="pointer-events-none absolute left-0 top-0 select-none text-h4 text-ods-text-secondary">
                   {disabled ? "Connection lost. Waiting to reconnect..." : placeholder}
                 </span>
               )}
@@ -525,7 +555,7 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
                   text; clearing `previewText` restores the (opacity-hidden)
                   editor. */}
               {showPreview && (
-                <p className="pointer-events-none absolute inset-x-0 top-0 m-0 select-none truncate text-h4 !leading-9 text-ods-text-secondary">
+                <p className={cn("pointer-events-none absolute inset-x-0 top-0 m-0 select-none truncate text-h4 text-ods-text-secondary", hasChips && "!leading-9")}>
                   {previewText}
                 </p>
               )}
@@ -540,7 +570,21 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
                 role="textbox"
                 aria-multiline="true"
                 aria-label={typeof placeholder === 'string' ? placeholder : 'Message'}
-                contentEditable={!isDisabled}
+                // `sending` blocks SENDING, never typing. Taking
+                // `contentEditable` away under a focused editor blurs it, and
+                // iOS dismisses the keyboard on blur; restoring it re-establishes
+                // the input session (and the refocus-after-send effect below
+                // re-presents the keyboard once more), so on a phone the keyboard
+                // flashed shut and open again around every send — repeatedly,
+                // because a host's `sending` toggles once per phase of a turn
+                // (`chatLoading` in `embeddable-chat` is `isTyping ||
+                // isCompacting`, and the legacy Mingo page adds dialog creation).
+                // Nothing is lost by staying editable: `fire()` and the send
+                // button are both gated on `sending` already, so a draft typed
+                // while a turn streams simply waits for its turn — Enter is a
+                // no-op until the send button lights back up. Only `disabled` —
+                // the transport is gone — takes the editor out of service.
+                contentEditable={!disabled}
                 suppressContentEditableWarning
                 spellCheck
                 onInput={handleInput}
@@ -558,17 +602,25 @@ const ChatInput = forwardRef<ChatInputRef, ChatInputProps>((allProps, ref) => {
                   // see the preview comment above) and is only made transparent;
                   // the absolutely-positioned single-line preview paints over it.
                   showPreview && "opacity-0",
-                  // `leading-9` (36px) sits just above the 32px chip's line-box need
-                  // (~35.5px incl. vertical-align overhead): the LINE drives row
-                  // height (deterministic 48px, no overflow) AND the near-zero slack
-                  // keeps the chip centered. ~4px gap between wrapped chip rows.
-                  // `min-h-9` pins that single-line box even when EMPTY: a non-editable
-                  // (`contentEditable=false`, i.e. disabled/sending) empty div would
-                  // otherwise collapse to 0px, and `items-center` would re-center the
-                  // shorter wrapper in the row — dropping the `top-0` placeholder down.
-                  "min-h-9 text-h4 text-ods-text-primary !leading-9",
+                  // WITH chips, `leading-9` (36px) sits just above the 32px chip's
+                  // line-box need (~35.5px incl. vertical-align overhead): the LINE
+                  // drives row height (deterministic 48px, no overflow) AND the
+                  // near-zero slack keeps the chip centered against the `align-top`
+                  // `h-9` wrapper `buildChipEl` gives it. ~4px gap between wrapped
+                  // chip rows.
+                  // WITHOUT chips there is nothing tall to center, and forcing the
+                  // same 36px box on 14px phone text (`text-h4`) put a blank line's
+                  // worth of air between every wrapped row — so plain drafts keep
+                  // `text-h4`'s own responsive line-height (20px / 24px at md).
+                  // `min-h-*` pins the single-line box even when EMPTY: a
+                  // non-editable (`contentEditable=false`, i.e. `disabled`) empty div
+                  // would otherwise collapse to 0px, and `items-center` would
+                  // re-center the shorter wrapper in the row — dropping the `top-0`
+                  // placeholder down.
+                  "text-h4 text-ods-text-primary",
+                  hasChips ? "min-h-9 !leading-9" : "min-h-[var(--font-line-space-h4-body)]",
                   "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-ods-border/30 hover:scrollbar-thumb-ods-text-secondary/30",
-                  isDisabled && "cursor-not-allowed",
+                  disabled && "cursor-not-allowed",
                 )}
               />
             </div>

package/src/components/popover.tsx

@@ -4,6 +4,7 @@ import * as React from "react"
 import * as PopoverPrimitive from "@radix-ui/react-popover"
 
 import { cn } from "../utils/cn"
+import { useKeyboardCollisionPadding } from "../hooks/ui/use-keyboard-collision-padding"
 
 const Popover = PopoverPrimitive.Root
 
@@ -12,20 +13,27 @@ const PopoverTrigger = PopoverPrimitive.Trigger
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-))
+>(({ className, align = "center", sideOffset = 4, collisionPadding, ...props }, ref) => {
+  // Any popover holding a field — the colour picker's hex/RGB inputs, a search
+  // box — is positioned against a collision viewport that does not know the
+  // software keyboard exists. See useKeyboardCollisionPadding.
+  const keyboardPadding = useKeyboardCollisionPadding()
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        ref={ref}
+        align={align}
+        sideOffset={sideOffset}
+        collisionPadding={collisionPadding ?? { bottom: keyboardPadding }}
+        className={cn(
+          "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+})
 PopoverContent.displayName = PopoverPrimitive.Content.displayName
 
 export { Popover, PopoverTrigger, PopoverContent }

package/src/components/ui/__tests__/__snapshots__/markdown-parity.test.tsx.snap

@@ -1,9 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`RichMarkdownRenderer golden parity > renders fixture: audit-reddit-embed-bq 1`] = `
-"<div class="simple-markdown-renderer "><div class="content-wrapper max-w-none"><article class="prose prose-lg max-w-none"><div data-mock="reddit" data-url="https://www.reddit.com/r/msp/comments/abc/post/"></div>
-&lt;script async src="https://embed.reddit.com/widgets.js" charset="UTF-8"&gt;&lt;/script&gt;</article></div></div>"
-`;
+exports[`RichMarkdownRenderer golden parity > renders fixture: audit-reddit-embed-bq 1`] = `"<div class="simple-markdown-renderer "><div class="content-wrapper max-w-none"><article class="prose prose-lg max-w-none"><div data-mock="reddit" data-url="https://www.reddit.com/r/msp/comments/abc/post/"></div></article></div></div>"`;
 
 exports[`RichMarkdownRenderer golden parity > renders fixture: audit-style-attrs 1`] = `
 "<div class="simple-markdown-renderer "><div class="content-wrapper max-w-none"><article class="prose prose-lg max-w-none"><div class="takeaway" style="padding: 8px;">Key point</div>
@@ -160,7 +157,6 @@ exports[`RichMarkdownRenderer golden parity > renders fixture: hostile-onerror 1
 
 exports[`RichMarkdownRenderer golden parity > renders fixture: hostile-script 1`] = `
 "<div class="simple-markdown-renderer "><div class="content-wrapper max-w-none"><article class="prose prose-lg max-w-none"><p class="first:mt-0 last:mb-0 text-ods-text-primary font-sans text-[16px] md:text-[18px] lg:text-[20px] leading-[1.6] my-4">before</p>
-<p class="first:mt-0 last:mb-0 text-ods-text-primary font-sans text-[16px] md:text-[18px] lg:text-[20px] leading-[1.6] my-4">&lt;script&gt;alert(1)&lt;/script&gt;</p>
 <p class="first:mt-0 last:mb-0 text-ods-text-primary font-sans text-[16px] md:text-[18px] lg:text-[20px] leading-[1.6] my-4">after</p></article></div></div>"
 `;
 

package/src/components/ui/autocomplete.tsx

@@ -27,6 +27,7 @@ import { Loader2 } from "lucide-react"
 import { cn } from "../../utils/cn"
 import { TruncateText } from "./truncate-text"
 import { useAutoLimitTags } from "../../hooks/ui/use-auto-limit-tags"
+import { useKeyboardCollisionPadding } from "../../hooks/ui/use-keyboard-collision-padding"
 import { FieldWrapper } from "./field-wrapper"
 import { HiddenTagsPopup } from "./hidden-tags-popup"
 import { Tag } from "./tag"
@@ -190,6 +191,7 @@ function AutocompleteInner<T = string>(
 
   const [isOpen, setIsOpen] = useState(false)
   const [highlightedIndex, setHighlightedIndex] = useState(-1)
+  const keyboardPadding = useKeyboardCollisionPadding()
   const containerRef = useRef<HTMLDivElement>(null)
   const hiddenTagsPopupRef = useRef<HTMLDivElement>(null)
 
@@ -561,12 +563,17 @@ function AutocompleteInner<T = string>(
         className={cn(
           "z-50 w-[var(--radix-popover-trigger-width)] mt-1",
           "bg-ods-card border border-ods-border rounded-[4px]",
+          "flex flex-col overflow-hidden max-h-[var(--radix-popper-available-height)]",
           "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
           dropdownClassName
         )}
         sideOffset={4}
         align="start"
+        // The anchor is the text field that raises the software keyboard, so
+        // this list is always positioned with the keyboard up — see
+        // useKeyboardCollisionPadding.
+        collisionPadding={{ bottom: keyboardPadding }}
         onOpenAutoFocus={(e) => {
           e.preventDefault()
           autoLimitTags.inputRef.current?.focus()
@@ -578,8 +585,8 @@ function AutocompleteInner<T = string>(
           }
         }}
       >
-        <ScrollAreaPrimitive.Root className="overflow-hidden">
-          <ScrollAreaPrimitive.Viewport className="max-h-[240px] w-full [&>div]:!block">
+        <ScrollAreaPrimitive.Root className="flex min-h-0 flex-col overflow-hidden">
+          <ScrollAreaPrimitive.Viewport className="min-h-0 max-h-[240px] w-full [&>div]:!block">
             <div role="listbox">
               {loading ? (
                 <div className="px-3 py-2 text-ods-text-secondary text-h6">

package/src/components/ui/file-upload.tsx

@@ -325,7 +325,11 @@ export function FileUpload<T extends FileUploadCandidate = File>({
     // already on screen, an unreadable selection), and this runs from a click
     // handler where a rejection would go unhandled.
     try {
-      handleFiles(await pickFiles())
+      // Skip the empty (cancelled) case rather than routing it through
+      // handleFiles, whose first act is to clear a validation message the user
+      // may still be reading.
+      const picked = await pickFiles()
+      if (picked.length > 0) handleFiles(picked)
     } catch (err) {
       setValidationError(err instanceof Error ? err.message : "Could not open the file picker")
     }

package/src/components/ui/markdown/rich/__tests__/shortcodes.test.ts

@@ -0,0 +1,58 @@
+import { describe, it, expect } from 'vitest';
+import { processShortcodes } from '../shortcodes';
+
+/**
+ * Step 1.5 of processShortcodes: pasted social embed markup ships a
+ * `widgets.js` loader `<script>` alongside its blockquote. Scripts never
+ * execute on this surface, but before the strip they leaked into the
+ * article body as VISIBLE escaped source text (2026-08 Reddit embed
+ * incident). These tests pin the strip's contract.
+ */
+describe('processShortcodes script stripping', () => {
+  it('strips the Reddit widgets.js loader that accompanies pasted blockquote embeds', () => {
+    const input =
+      '<blockquote class="reddit-embed-bq" data-embed-height="316">' +
+      '<a href="https://www.reddit.com/r/sysadmin/comments/1op05cl/anyone_using_splashtop_as_their_main_remote/">Anyone using Splashtop?</a>' +
+      '</blockquote>' +
+      '<script async="" src="https://embed.reddit.com/widgets.js" charset="UTF-8"></script>';
+    const output = processShortcodes(input);
+    expect(output).not.toContain('<script');
+    expect(output).not.toContain('widgets.js');
+    expect(output).toContain('reddit-embed-bq');
+    expect(output).toContain('/comments/1op05cl/');
+  });
+
+  it('strips the Twitter widgets.js loader', () => {
+    const input =
+      '<blockquote class="twitter-tweet"><a href="https://twitter.com/user/status/123">tweet</a></blockquote>' +
+      '<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>';
+    const output = processShortcodes(input);
+    expect(output).not.toContain('<script');
+    expect(output).toContain('twitter-tweet');
+  });
+
+  it('strips inline script elements with body content', () => {
+    const output = processShortcodes('before <script>alert("x")</script> after');
+    expect(output).not.toContain('script');
+    expect(output).toContain('before');
+    expect(output).toContain('after');
+  });
+
+  it('preserves script tags inside fenced code blocks', () => {
+    const input = 'Example:\n\n```html\n<script src="https://example.com/app.js"></script>\n```\n';
+    const output = processShortcodes(input);
+    expect(output).toContain('<script src="https://example.com/app.js"></script>');
+  });
+
+  it('preserves script tags inside inline code', () => {
+    const input = 'Use `<script defer></script>` for deferred loading.';
+    const output = processShortcodes(input);
+    expect(output).toContain('`<script defer></script>`');
+  });
+
+  it('leaves an unclosed script opener alone (falls through to the escape pre-pass)', () => {
+    const input = 'An unclosed <script> opener in prose.';
+    const output = processShortcodes(input);
+    expect(output).toContain('<script>');
+  });
+});

package/src/components/ui/markdown/rich/embed-overrides.tsx

@@ -153,13 +153,15 @@ export function buildRichEmbedOverrides({
       return (standard.div as any)(divProps);
     },
 
-    // Reddit's OWN embed markup lives in 58 published blog posts as
-    // `<blockquote class="reddit-embed-bq">…<a href="post-url">` paired with
-    // a `<script src="embed.reddit.com/widgets.js">` loader. The sanitize
-    // stack strips the script (correctly), so the composition rehydrates the
-    // blockquote itself: extract the post URL from the first reddit link and
-    // render the RedditEmbedClient SSOT. Non-reddit blockquotes fall through
-    // to the engine's base blockquote.
+    // Pasted-from-the-platform embed markup lives in published blog posts as
+    // `<blockquote class="reddit-embed-bq">…<a href="post-url">` (58 blocks
+    // across 9 posts) — and Twitter's equivalent is
+    // `<blockquote class="twitter-tweet">…<a href="status-url">`. Each pair
+    // ships a `widgets.js` loader script, which `processShortcodes` strips
+    // from the source text (Step 1.5). The composition rehydrates the
+    // blockquote itself: extract the post URL from the first matching link
+    // and render the platform's embed-client SSOT. Other blockquotes fall
+    // through to the engine's base blockquote.
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     blockquote: (bqProps: any) => {
       const { node, className } = bqProps;
@@ -168,6 +170,10 @@ export function buildRichEmbedOverrides({
         const postUrl = findFirstHref(node, /reddit\.com/);
         if (postUrl) return <RedditEmbedClient url={postUrl} />;
       }
+      if (classNames.includes('twitter-tweet')) {
+        const tweetUrl = findFirstHref(node, /(?:twitter\.com|x\.com)\/[^/]+\/status\//);
+        if (tweetUrl) return <TwitterEmbedClient url={tweetUrl} />;
+      }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       return (standard.blockquote as any)(bqProps);
     },

package/src/components/ui/markdown/rich/shortcodes.ts

@@ -78,6 +78,21 @@ export const processShortcodes = (content: string): string => {
     return placeholder;
   });
 
+  // Step 1.5: Strip well-formed `<script …>…</script>` elements from prose.
+  // Pasted social embed markup ships a loader script alongside its markup
+  // (Reddit: `<blockquote class="reddit-embed-bq">…` + embed.reddit.com
+  // widgets.js; Twitter: platform.twitter.com widgets.js). Scripts NEVER
+  // execute on this surface — the sanitize stack strips real ones — but the
+  // engine's text pre-pass escapes the tag first, so it used to render as
+  // VISIBLE source text under every embed. Runs after Step 1 so script tags
+  // inside code fences / inline code stay literal sample code; an UNCLOSED
+  // opener is left alone (falls through to today's escape-to-text behavior,
+  // which is the safe degrade). Quantifiers are hard-bounded (ReDoS).
+  processedContent = processedContent.replace(
+    /<script\b[^>]{0,2000}>[\s\S]{0,20000}?<\/script\s{0,10}>/gi,
+    ''
+  );
+
   // Step 2: Temporarily replace markdown links to protect them
   const markdownLinks: string[] = [];
   processedContent = processedContent.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match) => {

package/src/components/ui/search-input.tsx

@@ -6,6 +6,7 @@ import * as React from "react"
 import { cn } from "../../utils/cn"
 import { useDebounce } from "../../hooks/ui/use-debounce"
 import { useAutoLimitTags } from "../../hooks/ui/use-auto-limit-tags"
+import { useKeyboardCollisionPadding } from "../../hooks/ui/use-keyboard-collision-padding"
 import { SearchIcon } from "../icons-v2-generated"
 import { XmarkCircleIcon } from "../icons-v2-generated/signs-and-symbols/xmark-circle-icon"
 import { Tag } from "./tag"
@@ -168,6 +169,7 @@ export function SearchInput({
   // ---- Popover state ----
   const [isOpen, setIsOpen] = React.useState(false)
   const [highlightedIndex, setHighlightedIndex] = React.useState(-1)
+  const keyboardPadding = useKeyboardCollisionPadding()
 
   const containerRef = React.useRef<HTMLDivElement>(null)
 
@@ -499,6 +501,7 @@ export function SearchInput({
           className={cn(
             "z-50 w-[var(--radix-popover-trigger-width)] mt-1",
             "bg-ods-card border border-ods-border rounded-[6px] overflow-hidden shadow-lg",
+            "flex flex-col max-h-[var(--radix-popper-available-height)]",
             "data-[state=open]:animate-in data-[state=closed]:animate-out",
             "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
             "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -507,6 +510,10 @@ export function SearchInput({
           )}
           sideOffset={4}
           align="start"
+          // The anchor is the search field that raises the software keyboard,
+          // so these suggestions are always positioned with the keyboard up —
+          // see useKeyboardCollisionPadding.
+          collisionPadding={{ bottom: keyboardPadding }}
           onOpenAutoFocus={(e) => {
             e.preventDefault()
             inputRef.current?.focus()
@@ -517,8 +524,8 @@ export function SearchInput({
             }
           }}
         >
-          <ScrollAreaPrimitive.Root className="overflow-hidden">
-            <ScrollAreaPrimitive.Viewport className="max-h-[320px] w-full">
+          <ScrollAreaPrimitive.Root className="flex min-h-0 flex-col overflow-hidden">
+            <ScrollAreaPrimitive.Viewport className="min-h-0 max-h-[320px] w-full">
               <div role="listbox">
                 {renderDropdownContent()}
               </div>

package/src/components/ui/searchable-select.tsx

@@ -5,6 +5,7 @@ import * as React from 'react'
 import { CheckIcon, SearchIcon } from '../icons-v2-generated'
 import { Chevron02DownIcon } from '../icons-v2-generated/arrows/chevron-02-down-icon'
 import { cn } from '../../utils/cn'
+import { useKeyboardCollisionPadding } from '../../hooks/ui/use-keyboard-collision-padding'
 import { Input } from './input'
 
 export interface SearchableSelectOption {
@@ -67,6 +68,7 @@ export function SearchableSelect({
 }: SearchableSelectProps) {
   const [isOpen, setIsOpen] = React.useState(false)
   const [search, setSearch] = React.useState('')
+  const keyboardPadding = useKeyboardCollisionPadding()
 
   React.useEffect(() => {
     if (!isOpen) setSearch('')
@@ -119,8 +121,13 @@ export function SearchableSelect({
         <PopoverPrimitive.Content
           align={align}
           sideOffset={6}
+          // The search field below raises the software keyboard the moment this
+          // opens — see useKeyboardCollisionPadding for why neither the collision
+          // viewport nor the available height knows about it otherwise.
+          collisionPadding={{ bottom: keyboardPadding }}
           className={cn(
             'z-50 min-w-[var(--radix-popover-trigger-width)] bg-ods-card border border-ods-border rounded-md shadow-lg overflow-hidden',
+            'flex flex-col max-h-[var(--radix-popper-available-height)]',
             'data-[state=open]:animate-in data-[state=closed]:animate-out',
             'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
             'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
@@ -128,7 +135,7 @@ export function SearchableSelect({
             contentClassName,
           )}
         >
-          <div className="border-b border-ods-border">
+          <div className="shrink-0 border-b border-ods-border">
             <Input
               autoFocus
               value={search}
@@ -138,7 +145,7 @@ export function SearchableSelect({
               className="rounded-none border-0"
             />
           </div>
-          <div className="max-h-80 overflow-y-auto py-[var(--spacing-system-xs)]" role="listbox">
+          <div className="min-h-0 max-h-80 overflow-y-auto py-[var(--spacing-system-xs)]" role="listbox">
             {isLoading ? (
               <div className="px-[var(--spacing-system-sf)] py-[var(--spacing-system-s)] text-h5 text-ods-text-secondary">
                 {loadingText}

package/src/components/ui/tag-select-dropdown.tsx

@@ -3,6 +3,7 @@
 import * as PopoverPrimitive from '@radix-ui/react-popover'
 import * as React from 'react'
 import { cn } from '../../utils/cn'
+import { useKeyboardCollisionPadding } from '../../hooks/ui/use-keyboard-collision-padding'
 import { CheckIcon, PlusIcon, SearchIcon, TrashIcon } from '../icons-v2-generated'
 import { Button } from './button'
 import { Input } from './input'
@@ -59,6 +60,7 @@ export function TagSelectDropdown({
 }: TagSelectDropdownProps) {
   const [isOpen, setIsOpen] = React.useState(false)
   const [search, setSearch] = React.useState('')
+  const keyboardPadding = useKeyboardCollisionPadding()
 
   React.useEffect(() => {
     if (!isOpen) setSearch('')
@@ -110,15 +112,19 @@ export function TagSelectDropdown({
         <PopoverPrimitive.Content
           align={align}
           sideOffset={6}
+          // The search field below raises the software keyboard the moment this
+          // opens — see useKeyboardCollisionPadding.
+          collisionPadding={{ bottom: keyboardPadding }}
           className={cn(
             'z-50 w-72 bg-ods-card border border-ods-border rounded-[6px] shadow-lg overflow-hidden',
+            'flex flex-col max-h-[var(--radix-popper-available-height)]',
             'data-[state=open]:animate-in data-[state=closed]:animate-out',
             'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
             'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
             'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2',
           )}
         >
-          <div className="border-b border-ods-border">
+          <div className="shrink-0 border-b border-ods-border">
             <Input
               autoFocus
               value={search}
@@ -134,7 +140,7 @@ export function TagSelectDropdown({
               className="rounded-none border-0"
             />
           </div>
-          <div className="max-h-72 overflow-y-auto py-[var(--spacing-system-xs)]" role="listbox">
+          <div className="min-h-0 max-h-72 overflow-y-auto py-[var(--spacing-system-xs)]" role="listbox">
             {ordered.map(opt => {
               const isSelected = selectedIds.includes(opt.id)
               return (

package/src/components/ui/tags-manager.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { cn } from "../../utils/cn";
+import { useKeyboardCollisionPadding } from "../../hooks/ui/use-keyboard-collision-padding";
 import {
 	CheckIcon,
 	PencilIcon,
@@ -70,6 +71,7 @@ export function TagsManager({
 }: TagsManagerProps) {
 	const [open, setOpen] = React.useState(false);
 	const [search, setSearch] = React.useState("");
+	const keyboardPadding = useKeyboardCollisionPadding();
 	const [editingId, setEditingId] = React.useState<string | null>(null);
 	const [editingName, setEditingName] = React.useState("");
 	const editInputRef = React.useRef<HTMLInputElement>(null);
@@ -242,6 +244,7 @@ export function TagsManager({
 						className={cn(
 							"z-50 w-[var(--radix-popover-trigger-width)] mt-1",
 							"bg-ods-card border border-ods-border rounded",
+							"flex flex-col overflow-hidden max-h-[var(--radix-popper-available-height)]",
 							"data-[state=open]:animate-in data-[state=closed]:animate-out",
 							"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 							"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -249,6 +252,10 @@ export function TagsManager({
 						)}
 						sideOffset={4}
 						align="start"
+						// The anchor is the tag field that raises the software keyboard, so
+						// this list is always positioned with the keyboard up — see
+						// useKeyboardCollisionPadding.
+						collisionPadding={{ bottom: keyboardPadding }}
 						onOpenAutoFocus={(e) => {
 							e.preventDefault();
 							inputRef.current?.focus();
@@ -259,8 +266,8 @@ export function TagsManager({
 							}
 						}}
 					>
-						<ScrollAreaPrimitive.Root className="overflow-hidden">
-							<ScrollAreaPrimitive.Viewport className="max-h-60 w-full">
+						<ScrollAreaPrimitive.Root className="flex min-h-0 flex-col overflow-hidden">
+							<ScrollAreaPrimitive.Viewport className="min-h-0 max-h-60 w-full">
 								<div role="listbox">
 									{filtered.map((tag) => {
 										const isSelected = selectedIds.includes(tag.id);