@flamingo-stack/openframe-frontend-core 0.0.490 → 0.0.492-1506.3956.1

package/src/components/ui/autocomplete.tsx

@@ -124,7 +124,8 @@ const innerInputStyles = cn(
   "flex-1 min-w-[60px] bg-transparent border-none outline-none",
   "text-h4",
   "text-ods-text-primary placeholder:text-ods-text-secondary",
-  "disabled:cursor-not-allowed"
+  // Disabled - match Input exactly (value greys out, placeholder dims further)
+  "disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:placeholder:text-ods-border"
 )
 
 function AutocompleteInner<T = string>(
@@ -421,6 +422,9 @@ function AutocompleteInner<T = string>(
     <PopoverPrimitive.Root open={isOpen} onOpenChange={handleOpenChange} modal={false}>
       <PopoverPrimitive.Anchor asChild>
         <div
+          // Same marker Input/Textarea/Select expose — it is how a form finds
+          // (and scrolls to) the first field that failed validation.
+          data-invalid={isInvalid || undefined}
           className={cn(
             // Layout — single line, no wrapping
             "flex items-center rounded-[6px] border min-h-11 md:min-h-12 cursor-text",
@@ -430,6 +434,14 @@ function AutocompleteInner<T = string>(
             "group",
             !disabled && "hover:bg-ods-bg-hover hover:border-ods-border-hover active:bg-ods-bg-active active:border-ods-border-active",
             disabled && "!cursor-not-allowed bg-ods-bg",
+            // Adornments / chevron carry their own colour — grey them with the
+            // value so a disabled field reads as one flat colour. Scoped to the
+            // DIRECT span child (the start adornment) on purpose: as a descendant
+            // rule it also hit the selected `Tag` chips in the middle zone, whose
+            // label is a span, and they went invisible against their own fill in
+            // the light theme. Anything nested inside the adornment that sets its
+            // own colour keeps it; anything that doesn't inherits the grey.
+            "has-[:disabled]:[&>span]:text-ods-text-disabled has-[:disabled]:[&_svg]:text-ods-text-disabled",
             isOpen && !isInvalid && "border-ods-accent hover:border-ods-accent",
             isInvalid && "border-ods-error hover:border-ods-error"
           )}

package/src/components/ui/button/button.tsx

@@ -30,7 +30,7 @@ const buttonVariants = cva(
         overlay: buttonSurfaceClasses.overlay,
       },
       size: {
-        default: "py-[var(--spacing-system-sf)] px-[var(--spacing-system-m)] text-h3 md:h-12 h-10",
+        default: "py-[var(--spacing-system-sf)] px-[var(--spacing-system-m)] text-h3 md:h-12 h-11",
         small: "p-[var(--spacing-system-xs)] text-h5 h-6 md:h-8",
         "small-legacy": "py-[var(--spacing-system-xs)] px-[var(--spacing-system-m)] h-10 text-[14px] font-bold", // Temporary alias for "small" — deprecated; grep size="small-legacy" (lib + hub) and migrate the remaining consumers before removal
         // 24px pill for slim strips (announcement/promo bars, inline banner

package/src/components/ui/checkbox-block.tsx

@@ -36,6 +36,9 @@ const CheckboxBlock = React.forwardRef<
   <div className={cn("relative flex w-full flex-col", className)}>
     <label
       htmlFor={id}
+      // Same marker every field exposes — it is how a form finds (and scrolls
+      // to) the first control that failed validation.
+      data-invalid={error ? true : undefined}
       className={cn(
         "flex items-center gap-[var(--spacing-system-s)] rounded-md ring-1 ring-inset w-full",
         // Trailing content stacks full-width below the text on mobile.
@@ -45,8 +48,17 @@ const CheckboxBlock = React.forwardRef<
         description && "min-h-[60px] md:min-h-[64px]",
         "bg-ods-card ring-ods-border",
         "cursor-pointer transition-colors duration-200",
-        "hover:ring-ods-accent/30",
-        disabled && "opacity-50 cursor-not-allowed hover:ring-ods-border",
+        // States mirror Input: hover / active move the BACKGROUND, the ring
+        // stays put. Disabled swaps to the flat `ods-bg` fill and greys the
+        // text + the box instead of fading the whole block, so a disabled block
+        // reads the same as a disabled field. The greying itself lives on the
+        // TEXT COLUMN below, not here: as a descendant rule on the label it also
+        // repainted the checked INDICATOR (Radix renders it as a `span`, and the
+        // checkmark svg inherits `currentColor`) and whatever `trailing` renders
+        // — a `Tag`'s label is a span too, and it went invisible against its own
+        // fill in the light theme.
+        !disabled && "hover:bg-ods-bg-hover active:bg-ods-bg-active",
+        disabled && "cursor-not-allowed bg-ods-bg",
         error && "ring-ods-error",
       )}
     >
@@ -63,7 +75,11 @@ const CheckboxBlock = React.forwardRef<
           error ? "border-ods-error" : "border-[var(--color-border-strong)]",
           "bg-ods-card",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent focus-visible:ring-offset-2 focus-visible:ring-offset-ods-card",
+          // Disabled: the EMPTY box dims with the text instead of the whole
+          // block fading. A checked box keeps its accent fill — greying it too
+          // would bury the checkmark, and "on but locked" has to stay readable.
           "disabled:cursor-not-allowed",
+          "disabled:data-[state=unchecked]:bg-ods-bg disabled:data-[state=unchecked]:border-ods-border",
           "data-[state=checked]:bg-[var(--color-accent-primary)] data-[state=checked]:border-[var(--color-accent-primary)]"
         )}
       >
@@ -73,7 +89,15 @@ const CheckboxBlock = React.forwardRef<
           <CheckboxCheckmarkIcon className="w-2 h-2 md:w-2.5 md:h-2.5" />
         </CheckboxPrimitive.Indicator>
       </CheckboxPrimitive.Root>
-      <div className="flex flex-1 flex-col justify-center min-w-0">
+      <div
+        className={cn(
+          "flex flex-1 flex-col justify-center min-w-0",
+          // Direct children only — these are the two component-owned wrappers.
+          // `label` and `description` are ReactNode (rich text, inline links),
+          // so a descendant rule would repaint content the caller styled itself.
+          disabled && "[&>span]:text-ods-text-disabled",
+        )}
+      >
         <span className={cn(
           "text-h4 !leading-5 md:!leading-6",
           "text-ods-text-primary select-none",

package/src/components/ui/date-picker.tsx

@@ -451,8 +451,12 @@ const triggerButtonStyles = cn(
   // Hover & active (not disabled)
   "enabled:hover:bg-ods-bg-hover enabled:hover:border-ods-border-hover enabled:active:bg-ods-bg-active enabled:active:border-ods-border-active",
   "focus:outline-none",
-  // Disabled
+  // Disabled - match Input exactly. The value/placeholder span inside sets its
+  // own colour, so the child rule (higher specificity) greys it too. Scoped to
+  // DIRECT children like every other field, so nested content that owns its
+  // colour keeps it.
   "disabled:!cursor-not-allowed disabled:bg-ods-bg",
+  "disabled:text-ods-text-disabled disabled:[&>span]:text-ods-text-disabled disabled:[&_svg]:text-ods-text-disabled",
   // Animation
   "transition-colors duration-200"
 );
@@ -465,6 +469,7 @@ const timeSelectTriggerStyles = cn(
   "enabled:hover:bg-ods-bg-hover enabled:hover:border-ods-border-hover enabled:active:bg-ods-bg-active enabled:active:border-ods-border-active",
   "focus:outline-none",
   "disabled:!cursor-not-allowed disabled:bg-ods-bg",
+  "disabled:text-ods-text-disabled disabled:[&>span]:text-ods-text-disabled disabled:[&_svg]:text-ods-text-disabled",
   "transition-colors duration-200 cursor-pointer",
   "text-ods-text-primary"
 );
@@ -519,6 +524,9 @@ export function DatePicker(props: DatePickerProps) {
         <button
           type="button"
           disabled={disabled}
+          // Same marker Input/Textarea/Select expose — it is how a form finds
+          // (and scrolls to) the first field that failed validation.
+          data-invalid={isInvalid || undefined}
           className={cn(triggerButtonStyles, "group", open && !isInvalid && "border-ods-accent enabled:hover:border-ods-accent enabled:hover:bg-ods-card", isInvalid && "border-ods-error enabled:hover:border-ods-error enabled:hover:bg-ods-card", className)}
         >
           <Calendar className="size-6 text-ods-text-secondary shrink-0" />
@@ -692,6 +700,9 @@ export function DatePickerInput({
           <button
             type="button"
             disabled={disabled}
+            // Same marker Input/Textarea/Select expose — it is how a form finds
+            // (and scrolls to) the first field that failed validation.
+            data-invalid={isInvalid || undefined}
             className={cn(triggerButtonStyles, "group", open && !isInvalid && "border-ods-accent enabled:hover:border-ods-accent enabled:hover:bg-ods-card", isInvalid && "border-ods-error enabled:hover:border-ods-error enabled:hover:bg-ods-card", "flex-1")}
           >
             <Calendar className="size-6 text-ods-text-secondary shrink-0" />
@@ -923,6 +934,9 @@ export function DatePickerInputSimple({
           <button
             type="button"
             disabled={disabled}
+            // Same marker Input/Textarea/Select expose — it is how a form finds
+            // (and scrolls to) the first field that failed validation.
+            data-invalid={isInvalid || undefined}
             className={cn(triggerButtonStyles, "group", open && !isInvalid && "border-ods-accent enabled:hover:border-ods-accent enabled:hover:bg-ods-card", isInvalid && "border-ods-error enabled:hover:border-ods-error enabled:hover:bg-ods-card", "flex-1")}
           >
             <Calendar className="size-6 text-ods-text-secondary shrink-0" />

package/src/components/ui/field-wrapper.tsx

@@ -6,7 +6,16 @@ import { cn } from "../../utils/cn"
 export interface FieldWrapperProps {
   /** Label text displayed above the field */
   label?: string
-  /** Status message displayed below the field. Wraps up to two lines, then ellipsizes. */
+  /**
+   * Status message displayed below the field, on ONE line, ellipsized on
+   * overflow (full text via the native `title`).
+   *
+   * It is positioned OUT OF FLOW (absolute, hanging below the wrapper), so it
+   * never changes the field's height when it appears — the same treatment
+   * `CheckboxBlock` uses. The trade is that it overlaps whatever sits directly
+   * below: a form stacking fields needs at least ~20px of vertical gap (e.g.
+   * `gap-[var(--spacing-system-lf)]`) for the message to land in clear space.
+   */
   error?: string
   /** Color variant for the message: "error" (red), "warning" (yellow), "success" (green) or "muted" (grey) */
   errorVariant?: "error" | "warning" | "success" | "muted"
@@ -27,7 +36,7 @@ const FieldWrapper = React.forwardRef<HTMLDivElement, FieldWrapperProps>(
     const hasChrome = label != null || error != null
 
     return (
-      <div ref={ref} className={cn(hasChrome ? "flex w-full flex-col" : "contents", className)}>
+      <div ref={ref} className={cn(hasChrome ? "relative flex w-full flex-col" : "contents", className)}>
         {label && (
           <label className="text-h4 text-ods-text-primary mb-1">
             {label}
@@ -35,10 +44,7 @@ const FieldWrapper = React.forwardRef<HTMLDivElement, FieldWrapperProps>(
         )}
         {children}
         {error && (
-          <p
-            className={cn("mt-1 text-h6 break-words line-clamp-2", errorVariantClasses[errorVariant])}
-            title={error}
-          >
+          <p className={cn("absolute bottom-0 left-0 right-0 translate-y-full text-h6 truncate", errorVariantClasses[errorVariant])} title={error}>
             {error}
           </p>
         )}

package/src/components/ui/floating-tooltip.tsx

@@ -26,6 +26,13 @@ interface FloatingTooltipProps {
   delayDuration?: number
   /** Disable the tooltip without unmounting the trigger wrapper. */
   disabled?: boolean
+  /**
+   * Classes for the trigger wrapper — the `div` this component puts around
+   * `children` to anchor the tooltip. That div becomes the flex/grid item in the
+   * caller's layout, so anything the child needed there (`min-w-0`, `flex-1`)
+   * must move onto it. Omit it and the wrapper carries no class, exactly as before.
+   */
+  triggerClassName?: string
 }
 
 // Parse colored text markup like [YELLOW]text[/YELLOW] into JSX
@@ -85,6 +92,7 @@ export function FloatingTooltip({
   className,
   delayDuration = 0,
   disabled = false,
+  triggerClassName,
 }: FloatingTooltipProps) {
   const [isOpen, setIsOpen] = React.useState(false)
   const arrowRef = React.useRef<HTMLDivElement>(null)
@@ -151,7 +159,7 @@ export function FloatingTooltip({
 
   return (
     <>
-      <div ref={refs.setReference} {...getReferenceProps()}>
+      <div ref={refs.setReference} className={triggerClassName} {...getReferenceProps()}>
         {children}
       </div>
       <FloatingPortal>

package/src/components/ui/index.ts

@@ -176,7 +176,6 @@ export * from './ticket-attachments-list'
 export * from './ticket-note-card'
 export * from './ticket-notes-section'
 export * from './marquee-wall'
-export * from './simple-markdown-renderer'
-export { RichMarkdownRenderer, type RichMarkdownRendererProps } from './rich-markdown-renderer'
+export * from './markdown'
 export * from './filter-pill-row'
 

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

@@ -52,7 +52,14 @@ export const InputTrigger = React.forwardRef<HTMLButtonElement, InputTriggerProp
 						"data-[state=open]:border-ods-accent data-[state=open]:hover:border-ods-accent",
 					invalid &&
 						"border-ods-error enabled:hover:border-ods-error data-[state=open]:border-ods-error",
-					"disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-ods-bg",
+					// Disabled - match Input / SelectTrigger: grey the TEXT, don't fade the
+					// whole control (a blanket opacity also washes out the border and the
+					// adornment icons, which no other field does). The child rule catches
+					// the label span, which sets its own placeholder colour. Scoped to
+					// DIRECT children: `selectedLabel` is a ReactNode the caller owns, so
+					// anything inside it that sets its own colour keeps it.
+					"disabled:cursor-not-allowed disabled:bg-ods-bg",
+					"disabled:text-ods-text-disabled disabled:[&>span]:text-ods-text-disabled disabled:[&_svg]:text-ods-text-disabled",
 					"transition-colors duration-200",
 					className,
 				)}

package/src/components/ui/input.tsx

@@ -83,8 +83,15 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           "bg-ods-card border-ods-border has-[:focus]:border-ods-accent",
           // Hover & active (not disabled)
           !props.disabled && "hover:bg-ods-bg-hover hover:border-ods-border-hover active:bg-ods-bg-active active:border-ods-border-active",
-          // Disabled
+          // Disabled. The adornments (and any icon inside them) carry their own
+          // `text-ods-text-secondary`, so grey them from here — a disabled field
+          // must read as one flat colour, not grey text next to a live icon.
+          // Scoped to the DIRECT span children (the two adornment wrappers): a
+          // descendant rule would also repaint whatever the caller renders INSIDE
+          // an adornment, which is passed verbatim precisely so it can own its
+          // colour (a `Tag` there went invisible against its own fill).
           props.disabled && "!cursor-not-allowed bg-ods-bg",
+          "has-[:disabled]:[&>span]:text-ods-text-disabled has-[:disabled]:[&_svg]:text-ods-text-disabled",
           // Invalid
           isInvalid && invalidBorderClasses[variantIsInvalid ? (errorVariant as "error" | "warning") : "error"],
           className

package/src/components/ui/markdown/__tests__/mermaid-security.test.ts

@@ -0,0 +1,115 @@
+/**
+ * Mermaid renders MODEL-authored diagram source on the chat path, and the
+ * result is injected with `dangerouslySetInnerHTML`. This fixture pins the
+ * hardening in ../mermaid-diagram.tsx: a hostile node label must NOT survive
+ * as live HTML.
+ *
+ * The test drives `mermaid` with the SAME security knobs the component sets,
+ * by IMPORTING them: `MERMAID_SECURITY_OPTIONS` is the single source of truth
+ * and is spread into both `mermaid.initialize` calls. There are no literals
+ * here to drift from the component — flipping `securityLevel` to `'loose'` in
+ * the constant fails this suite (verified).
+ *
+ * `secure` is part of that constant: it is the allowlist of config keys a
+ * `%%{init}%%` directive inside the diagram SOURCE may not override. mermaid's
+ * default list omits `htmlLabels`, so untrusted source could otherwise
+ * re-enable HTML labels while `securityLevel` stayed locked.
+ *
+ * jsdom NOTE (recorded, not proven): before `htmlLabels` was added to `secure`,
+ * a `%%{init: {"htmlLabels": true}}%%` directive was observed to make
+ * `mermaid.render` never settle under jsdom (>60s, against a passing
+ * two-render control). That was NOT reproduced in a real browser and may be an
+ * artifact of jsdom having no layout — it is NOT a confirmed browser DoS. The
+ * component wraps its render in a timeout regardless.
+ */
+import { beforeAll, describe, expect, it } from 'vitest'
+import { MERMAID_SECURITY_OPTIONS } from '../mermaid-diagram'
+
+// jsdom implements no SVG layout, and mermaid's dagre pass measures text.
+// These stubs are only about making the renderer RUN; they do not touch the
+// sanitization path under test.
+function installSvgLayoutStubs(): void {
+  const proto = (globalThis as unknown as { SVGElement?: { prototype: Record<string, unknown> } }).SVGElement?.prototype
+  if (!proto) return
+  proto.getBBox = function getBBox() {
+    return { x: 0, y: 0, width: 100, height: 20 }
+  }
+  proto.getComputedTextLength = function getComputedTextLength() {
+    return 100
+  }
+  proto.getScreenCTM = function getScreenCTM() {
+    return { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0, inverse: () => ({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 }) }
+  }
+}
+
+// Second tuple slot: text that MUST be present in the rendered output — a
+// positive control proving the diagram was actually drawn, so the negative
+// assertions below can't pass on empty output. Note the two payloads are
+// neutralized differently: the `<img>` survives as ESCAPED label text, while
+// the `<script>` is dropped outright, so its control is the sibling node.
+const HOSTILE_LABELS: ReadonlyArray<readonly [chart: string, expectedText: string]> = [
+  ['graph TD\n  A["<img src=x onerror=alert(1)>"] --> B["ok"]', '<img'],
+  ['graph TD\n  A["<script>alert(1)</script>"] --> B["ok"]', 'ok'],
+  // A `%%{init}%%` directive trying to unlock the two knobs. Both keys are in
+  // `secure`, so the override is rejected and the payload stays escaped.
+  [
+    '%%{init:{"securityLevel":"loose"}}%%\ngraph TD\n  A["<img src=x onerror=alert(1)>"] --> B["ok"]',
+    '<img',
+  ],
+  [
+    '%%{init:{"htmlLabels":true}}%%\ngraph TD\n  A["<img src=x onerror=alert(1)>"] --> B["ok"]',
+    '<img',
+  ],
+  // YAML front-matter config — the other in-source config channel.
+  [
+    '---\nconfig:\n  securityLevel: loose\n---\ngraph TD\n  A["<img src=x onerror=alert(1)>"] --> B["ok"]',
+    '<img',
+  ],
+  // `click` interaction directive: disabled outright by 'strict'.
+  ['graph TD\n  A["ok"] --> B["b"]\n  click A "javascript:alert(1)"', 'ok'],
+]
+
+/** Initialize with the COMPONENT's security options — imported, never
+ *  re-typed — so the fixture cannot drift from the renderer. */
+function initializeLikeComponent(mermaid: { initialize: (c: Record<string, unknown>) => void }): void {
+  mermaid.initialize({
+    startOnLoad: false,
+    theme: 'dark',
+    flowchart: { useMaxWidth: true },
+    ...MERMAID_SECURITY_OPTIONS,
+  })
+}
+
+describe('mermaid hostile-label hardening', () => {
+  beforeAll(() => {
+    installSvgLayoutStubs()
+  })
+
+  it.each(HOSTILE_LABELS)('does not emit live HTML for %j', async (chart, expectedText) => {
+    const { default: mermaid } = await import('mermaid')
+
+    initializeLikeComponent(mermaid)
+
+    const { svg } = await mermaid.render(`mermaid-security-${Math.random().toString(36).slice(2)}`, chart)
+
+    // No live element, and no event-handler attribute, anywhere in the output.
+    expect(svg).not.toMatch(/<img[\s>]/i)
+    expect(svg).not.toMatch(/<script[\s>]/i)
+    expect(svg).not.toMatch(/\son[a-z]+\s*=/i)
+    // `htmlLabels: false` means no HTML subtree is minted for labels at all.
+    expect(svg).not.toMatch(/<foreignObject/i)
+    // 'strict' drops `click` bindings, so no javascript: URL is ever emitted.
+    expect(svg).not.toMatch(/javascript:/i)
+
+    // And it stays inert once parsed as HTML: the hostile markup must appear
+    // as TEXT (escaped), never as an element node.
+    const host = document.createElement('div')
+    host.innerHTML = svg
+    expect(host.querySelector('img')).toBeNull()
+    expect(host.querySelector('script')).toBeNull()
+    const text = host.textContent ?? ''
+    expect(text).toContain(expectedText)
+    // The script payload never survives in any form.
+    expect(text).not.toContain('alert(1)')
+  })
+})

package/src/components/ui/markdown/__tests__/mermaid-stale-render.test.tsx

@@ -0,0 +1,95 @@
+/**
+ * MermaidDiagram's render effect re-runs on every `chart` change, and during
+ * STREAMING the chart text grows chunk by chunk — so several renders are in
+ * flight at once. Without a per-effect cancellation guard a slower EARLIER
+ * render can resolve last and overwrite the newer output (and, on the error
+ * path, paint an error for a chart that is no longer displayed).
+ *
+ * The 15s render timeout does not close this: it rejects the race, but does
+ * not abort the underlying `mermaid.render`, so the stale write is merely
+ * bounded, not prevented. These fixtures pin the guard.
+ *
+ * `mermaid` is mocked with a hand-settled deferred so resolution ORDER is
+ * under the test's control. (The real-mermaid security fixture lives in
+ * ./mermaid-security.test.ts and must stay unmocked, hence a separate file.)
+ */
+import { render, act } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+interface Deferred {
+  chart: string
+  resolve: (value: { svg: string }) => void
+  reject: (err: Error) => void
+}
+
+const renders: Deferred[] = []
+
+vi.mock('mermaid', () => ({
+  default: {
+    initialize: vi.fn(),
+    render: vi.fn(
+      (_id: string, chart: string) =>
+        new Promise<{ svg: string }>((resolve, reject) => {
+          renders.push({ chart, resolve, reject })
+        }),
+    ),
+  },
+}))
+
+import { MermaidDiagram } from '../mermaid-diagram'
+
+/** Let the mocked dynamic import + the resolved promise chain flush. */
+const flush = async () => {
+  await act(async () => {
+    await Promise.resolve()
+    await Promise.resolve()
+    await Promise.resolve()
+  })
+}
+
+const svgOf = (container: HTMLElement) =>
+  container.querySelector('.mermaid-svg-container')?.innerHTML ?? ''
+
+describe('MermaidDiagram stale-render guard', () => {
+  beforeEach(() => {
+    renders.length = 0
+  })
+
+  it('ignores an earlier render that resolves after a newer chart', async () => {
+    const view = render(<MermaidDiagram chart="graph TD\n A-->B" />)
+    await flush()
+    view.rerender(<MermaidDiagram chart="graph TD\n A-->B\n B-->C" />)
+    await flush()
+    expect(renders).toHaveLength(2)
+
+    // Newer render lands first, then the abandoned earlier one.
+    await act(async () => {
+      renders[1]!.resolve({ svg: '<svg id="new"></svg>' })
+    })
+    await act(async () => {
+      renders[0]!.resolve({ svg: '<svg id="stale"></svg>' })
+    })
+    await flush()
+
+    expect(svgOf(view.container)).toContain('id="new"')
+    expect(svgOf(view.container)).not.toContain('id="stale"')
+  })
+
+  it('ignores a late failure from an abandoned render', async () => {
+    const view = render(<MermaidDiagram chart="graph TD\n A-->B" />)
+    await flush()
+    view.rerender(<MermaidDiagram chart="graph TD\n A-->B\n B-->C" />)
+    await flush()
+
+    await act(async () => {
+      renders[1]!.resolve({ svg: '<svg id="new"></svg>' })
+    })
+    await act(async () => {
+      renders[0]!.reject(new Error('Diagram rendering timed out after 15000ms'))
+    })
+    await flush()
+
+    expect(view.container.textContent).not.toContain('Diagram Error')
+    expect(svgOf(view.container)).toContain('id="new"')
+  })
+})