@dryui/feedback 0.0.2

package/dist/layout-mode/design-mode.svelte.d.ts

@@ -0,0 +1,24 @@
+import { type CanvasWidth, type DesignPlacement, type LayoutModeComponentType, type Rect } from './types.js';
+interface Props {
+    placements: DesignPlacement[];
+    activeComponent: LayoutModeComponentType | null;
+    wireframe?: boolean;
+    passthrough?: boolean;
+    extraSnapRects?: Rect[];
+    deselectSignal?: number;
+    clearSignal?: number;
+    exiting?: boolean;
+    canvasWidth?: CanvasWidth;
+    class?: string;
+    onChange?: (placements: DesignPlacement[]) => void;
+    onActiveComponentChange?: (type: LayoutModeComponentType | null) => void;
+    onInteractionChange?: (active: boolean) => void;
+    onSelectionChange?: (selectedIds: Set<string>, isShift: boolean) => void;
+    onDragMove?: (dx: number, dy: number) => void;
+    onDragEnd?: (dx: number, dy: number, committed: boolean) => void;
+    onCanvasWidthChange?: (width: CanvasWidth) => void;
+    onHistoryPush?: () => void;
+}
+declare const DesignMode: import("svelte").Component<Props, {}, "activeComponent">;
+type DesignMode = ReturnType<typeof DesignMode>;
+export default DesignMode;

package/dist/layout-mode/design-palette.svelte

@@ -0,0 +1,396 @@
+<script lang="ts">
+  import { Accordion, Badge, Button, Card, EmptyState, Flex, Input, ScrollArea, Stack, Text, Textarea } from '@dryui/ui';
+  import { renderPlacementSkeleton } from './placement-skeleton.js';
+  import { COMPONENT_REGISTRY, type CanvasPurpose, type LayoutModeComponentType } from './types.js';
+
+  interface Props {
+    open?: boolean;
+    value?: LayoutModeComponentType | null;
+    purpose?: CanvasPurpose;
+    wireframePrompt?: string;
+    wireframe?: boolean;
+    placementCount?: number;
+    sectionCount?: number;
+    onSelect?: (type: LayoutModeComponentType) => void;
+    onDetectSections?: () => void;
+    onPurposeChange?: (purpose: CanvasPurpose) => void;
+    onWireframePromptChange?: (value: string) => void;
+    onDragStart?: (type: LayoutModeComponentType, event: MouseEvent) => void;
+    onClear?: () => void;
+    class?: string;
+  }
+
+  let {
+    open = $bindable(false),
+    value = $bindable(null),
+    purpose = $bindable('replace-current'),
+    wireframePrompt = $bindable(''),
+    wireframe = false,
+    placementCount = 0,
+    sectionCount = 0,
+    onSelect,
+    onDetectSections,
+    onPurposeChange,
+    onWireframePromptChange,
+    onDragStart,
+    onClear,
+    class: className,
+  }: Props = $props();
+
+  const scrollId = 'dryui-feedback-layout-palette-scroll';
+
+  let fadeTop = $state(false);
+  let fadeBottom = $state(false);
+  let searchQuery = $state('');
+  let expandedSections = $state<string[]>(COMPONENT_REGISTRY.map((section) => section.section));
+
+  const blankCanvas = $derived(purpose === 'new-page' || wireframe);
+  const totalCount = $derived(placementCount + sectionCount);
+  const countLabel = $derived.by(() => {
+    if (totalCount === 0) {
+      return blankCanvas ? 'No wireframe components yet' : 'No layout changes yet';
+    }
+
+    if (blankCanvas) {
+      return `${totalCount} ${totalCount === 1 ? 'Component' : 'Components'}`;
+    }
+
+    return `${totalCount} ${totalCount === 1 ? 'Change' : 'Changes'}`;
+  });
+  const countSummary = $derived.by(() => {
+    const parts: string[] = [];
+    if (placementCount > 0) {
+      parts.push(`${placementCount} placed`);
+    }
+    if (sectionCount > 0) {
+      parts.push(`${sectionCount} captured`);
+    }
+    return parts.join(' · ');
+  });
+  const filteredRegistry = $derived.by(() => {
+    const query = searchQuery.trim().toLowerCase();
+    if (!query) {
+      return COMPONENT_REGISTRY;
+    }
+
+    return COMPONENT_REGISTRY.map((section) => ({
+      ...section,
+      items: section.items.filter((item) => {
+        const haystack = [
+          item.label,
+          item.type,
+          item.sourceName,
+          item.description,
+          item.guidance,
+          item.structure,
+          section.section,
+          ...item.tags,
+        ]
+          .filter(Boolean)
+          .join(' ')
+          .toLowerCase();
+        return haystack.includes(query);
+      }),
+    })).filter((section) => section.items.length > 0);
+  });
+
+  function paletteShellClass(): string {
+    return ['layout-palette-shell', className].filter(Boolean).join(' ');
+  }
+
+  function selectComponent(type: LayoutModeComponentType) {
+    value = type;
+    onSelect?.(type);
+  }
+
+  function selectPurpose(next: CanvasPurpose) {
+    purpose = next;
+    onPurposeChange?.(next);
+  }
+
+  function toggleWireframe() {
+    selectPurpose(blankCanvas ? 'replace-current' : 'new-page');
+  }
+
+  function updatePrompt(event: Event) {
+    const next = (event.currentTarget as HTMLTextAreaElement).value;
+    wireframePrompt = next;
+    onWireframePromptChange?.(next);
+  }
+
+  function resolveScrollElement(target?: EventTarget | null): HTMLElement | null {
+    if (target instanceof HTMLElement) {
+      return target;
+    }
+
+    return document.getElementById(scrollId);
+  }
+
+  function syncScrollFade(target?: EventTarget | null) {
+    const element = resolveScrollElement(target);
+    if (!element) {
+      fadeTop = false;
+      fadeBottom = false;
+      return;
+    }
+
+    fadeTop = element.scrollTop > 4;
+    fadeBottom = element.scrollTop + element.clientHeight < element.scrollHeight - 4;
+  }
+
+  function queueScrollFadeSync() {
+    requestAnimationFrame(() => syncScrollFade());
+  }
+
+  function syncPaletteChrome(_key: string) {
+    return () => {
+      queueScrollFadeSync();
+    };
+  }
+
+  function applyPreview(node: HTMLElement, type: LayoutModeComponentType) {
+    node.innerHTML = renderPlacementSkeleton({
+      type,
+      width: 24,
+      height: 18,
+    });
+  }
+
+  function mountPreview(type: LayoutModeComponentType) {
+    return (node: HTMLElement) => {
+      applyPreview(node, type);
+
+      return () => {
+        node.innerHTML = '';
+      };
+    };
+  }
+
+  function handleSearchInput() {
+    queueScrollFadeSync();
+  }
+
+  function clearSearch() {
+    searchQuery = '';
+    queueScrollFadeSync();
+  }
+</script>
+
+{#if open}
+  <div
+    class={paletteShellClass()}
+    data-layout-mode-palette
+    data-dryui-feedback
+  >
+    <Card.Root
+      variant="elevated"
+      size="sm"
+      style={`inline-size:min(22rem, calc(100vw - 1.5rem)); max-inline-size:100%; max-block-size:min(72vh, 44rem); overflow:hidden; border-color:${blankCanvas ? 'color-mix(in srgb, #f97316 24%, var(--dry-card-border, rgba(15, 23, 42, 0.08)))' : 'var(--dry-card-border, rgba(15, 23, 42, 0.08))'}; box-shadow:0 28px 64px color-mix(in srgb, var(--dry-color-bg-overlay, #0f172a) 14%, transparent);`}
+    >
+      <Card.Header style="display:flex; flex-direction:column; gap:0.75rem; padding:0.9rem 1rem 0.75rem;">
+        <Stack gap="sm">
+          <Flex justify="between" align="start" gap="sm" wrap="wrap">
+            <Stack gap="sm">
+              <Text as="div" size="md">Layout Mode</Text>
+              <Text as="div" size="sm" color="secondary">
+                Search the placement library, sketch a new wireframe, or capture the current page structure before you hand off layout feedback to an agent.
+              </Text>
+            </Stack>
+            <Badge variant="soft" color={blankCanvas ? 'orange' : 'blue'}>
+              {blankCanvas ? 'Wireframe' : 'Live page'}
+            </Badge>
+          </Flex>
+
+          <Input
+            bind:value={searchQuery}
+            placeholder="Search components"
+            aria-label="Search layout components"
+            oninput={handleSearchInput}
+          />
+        </Stack>
+      </Card.Header>
+
+      <Card.Content style="display:flex; flex-direction:column; gap:0.75rem; padding:0 0 0.75rem;">
+        <div style="padding-inline:1rem;">
+          <Button
+            data-layout-wireframe-toggle
+            variant={blankCanvas ? 'solid' : 'outline'}
+            size="sm"
+            onclick={toggleWireframe}
+            style={`inline-size:100%; justify-content:flex-start; gap:0.55rem; ${blankCanvas ? 'background:#f97316; border-color:#f97316; color:white;' : 'border-style:dashed;'}`}
+          >
+            <span aria-hidden="true" style="display:flex; inline-size:0.875rem; block-size:0.875rem; align-items:center; justify-content:center; flex-shrink:0;">
+              <svg viewBox="0 0 14 14" width="14" height="14" fill="none">
+                <rect x="1" y="1" width="12" height="12" rx="2" stroke="currentColor" stroke-width="1"></rect>
+                <circle cx="4.5" cy="4.5" r="0.8" fill="currentColor" opacity=".6"></circle>
+                <circle cx="7" cy="4.5" r="0.8" fill="currentColor" opacity=".6"></circle>
+                <circle cx="9.5" cy="4.5" r="0.8" fill="currentColor" opacity=".6"></circle>
+                <circle cx="4.5" cy="7" r="0.8" fill="currentColor" opacity=".6"></circle>
+                <circle cx="7" cy="7" r="0.8" fill="currentColor" opacity=".6"></circle>
+                <circle cx="9.5" cy="7" r="0.8" fill="currentColor" opacity=".6"></circle>
+                <circle cx="4.5" cy="9.5" r="0.8" fill="currentColor" opacity=".6"></circle>
+                <circle cx="7" cy="9.5" r="0.8" fill="currentColor" opacity=".6"></circle>
+                <circle cx="9.5" cy="9.5" r="0.8" fill="currentColor" opacity=".6"></circle>
+              </svg>
+            </span>
+            <span>{blankCanvas ? 'Return to current page' : 'Wireframe new page'}</span>
+          </Button>
+        </div>
+
+        <div
+          data-layout-wireframe-prompt-wrap
+          style={`display:grid; grid-template-rows:${blankCanvas ? '1fr' : '0fr'}; opacity:${blankCanvas ? 1 : 0}; transition:grid-template-rows 160ms ease, opacity 120ms ease;`}
+        >
+          <div style="overflow:hidden; padding-inline:1rem;">
+            <Textarea
+              bind:value={wireframePrompt}
+              placeholder="Describe this page to provide additional context for your agent."
+              style="inline-size:100%; margin-block-start:0.125rem; min-block-size:5rem;"
+              oninput={updatePrompt}
+            />
+          </div>
+        </div>
+
+        <div
+          style="position:relative; min-block-size:0; padding-inline:0.5rem;"
+          {@attach syncPaletteChrome(`${open}:${blankCanvas}:${placementCount}:${sectionCount}:${filteredRegistry.length}`)}
+        >
+          {#if fadeTop}
+            <div
+              aria-hidden="true"
+              style="pointer-events:none; position:absolute; inset-inline:0.5rem; inset-block-start:0; block-size:1rem; z-index:2; background:linear-gradient(180deg, color-mix(in srgb, var(--dry-card-bg, white) 96%, transparent), transparent);"
+            ></div>
+          {/if}
+          {#if fadeBottom}
+            <div
+              aria-hidden="true"
+              style="pointer-events:none; position:absolute; inset-inline:0.5rem; inset-block-end:0; block-size:1rem; z-index:2; background:linear-gradient(0deg, color-mix(in srgb, var(--dry-card-bg, white) 96%, transparent), transparent);"
+            ></div>
+          {/if}
+
+          <ScrollArea
+            id={scrollId}
+            orientation="vertical"
+            onscroll={(event) => syncScrollFade(event.currentTarget)}
+            style="display:flex; flex-direction:column; gap:0.9rem; max-block-size:min(44vh, 27rem); padding:0 0.5rem 0.125rem;"
+          >
+            {#if filteredRegistry.length > 0}
+              <Accordion.Root type="multiple" bind:value={expandedSections}>
+                {#each filteredRegistry as section (section.section)}
+                  <Accordion.Item value={section.section}>
+                    <Accordion.Trigger>
+                      <Flex justify="between" align="center" gap="sm" style="inline-size:100%; min-inline-size:0;">
+                        <Text as="span" size="sm" weight="medium">{section.section}</Text>
+                        <Text as="span" size="sm" color="secondary">{section.items.length}</Text>
+                      </Flex>
+                    </Accordion.Trigger>
+                    <Accordion.Content>
+                      <Stack gap="sm" style="padding-block-start:0.35rem;">
+                        {#each section.items as item (item.type)}
+                          <Button
+                            data-layout-palette-item={item.type}
+                            variant={value === item.type ? 'soft' : 'ghost'}
+                            size="sm"
+                            aria-pressed={value === item.type}
+                            style={`inline-size:100%; justify-content:flex-start; padding-inline:0.625rem; ${value === item.type ? `border-color:${blankCanvas ? '#f97316' : 'var(--dry-color-fill-brand, #7c3aed)'};` : ''}`}
+                            onmousedown={(event) => {
+                              if (event.button !== 0) return;
+                              onDragStart?.(item.type, event);
+                            }}
+                            onclick={() => selectComponent(item.type)}
+                          >
+                            <span style="display:flex; align-items:center; gap:0.625rem; inline-size:100%; min-inline-size:0;">
+                              <span
+                                data-layout-palette-item-preview
+                                aria-hidden="true"
+                                style={`display:block; inline-size:1.5rem; block-size:1.125rem; border-radius:0.3rem; overflow:hidden; flex-shrink:0; background:${blankCanvas ? 'rgba(249, 115, 22, 0.08)' : 'color-mix(in srgb, var(--dry-color-fill-brand, #7c3aed) 6%, transparent)'};`}
+                              >
+                                <span {@attach mountPreview(item.type)}></span>
+                              </span>
+                              <span style="display:flex; flex-direction:column; align-items:flex-start; gap:0.15rem; inline-size:100%; min-inline-size:0;">
+                                <span style="display:flex; align-items:center; justify-content:space-between; gap:0.5rem; inline-size:100%; min-inline-size:0;">
+                                  <Text as="span" size="sm" style="min-inline-size:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
+                                    {item.label}
+                                  </Text>
+                                  <span style="flex-shrink:0; font-size:0.6875rem; opacity:0.58;">
+                                    {item.width}x{item.height}
+                                  </span>
+                                </span>
+                                <span style="display:flex; align-items:center; gap:0.4rem; min-inline-size:0; inline-size:100%;">
+                                  <Badge variant="soft" color={item.sourceKind === 'block' ? 'warning' : 'info'}>
+                                    {item.sourceLabel}
+                                  </Badge>
+                                  <Text
+                                    as="span"
+                                    size="sm"
+                                    color="secondary"
+                                    style="min-inline-size:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"
+                                  >
+                                    {item.description}
+                                  </Text>
+                                </span>
+                              </span>
+                            </span>
+                          </Button>
+                        {/each}
+                      </Stack>
+                    </Accordion.Content>
+                  </Accordion.Item>
+                {/each}
+              </Accordion.Root>
+            {:else}
+              <EmptyState.Root style="padding:1rem 0.5rem 1.25rem;">
+                <EmptyState.Icon>
+                  <span aria-hidden="true">?</span>
+                </EmptyState.Icon>
+                <EmptyState.Title>No components found</EmptyState.Title>
+                <EmptyState.Description>
+                  Try a broader search term or clear the filter to browse the full layout catalog.
+                </EmptyState.Description>
+                <EmptyState.Action>
+                  <Button variant="outline" size="sm" onclick={clearSearch}>Clear search</Button>
+                </EmptyState.Action>
+              </EmptyState.Root>
+            {/if}
+          </ScrollArea>
+        </div>
+      </Card.Content>
+
+      <Card.Footer style="display:flex; align-items:center; justify-content:space-between; gap:0.75rem; padding:0.75rem 1rem 0.9rem;">
+        <Stack gap="sm">
+          <Text as="div" size="sm">{countLabel}</Text>
+          {#if countSummary}
+            <Text as="div" size="sm" color="secondary">{countSummary}</Text>
+          {/if}
+        </Stack>
+
+        <Flex gap="sm" wrap="wrap" justify="end">
+          {#if !blankCanvas && sectionCount === 0 && onDetectSections}
+            <Button variant="outline" size="sm" onclick={onDetectSections}>Capture sections</Button>
+          {/if}
+          {#if totalCount > 0 && onClear}
+            <Button variant="ghost" size="sm" onclick={onClear}>Clear</Button>
+          {/if}
+        </Flex>
+      </Card.Footer>
+    </Card.Root>
+  </div>
+{/if}
+
+<style>
+  .layout-palette-shell {
+    position: fixed;
+    inset-inline-end: 1rem;
+    inset-block-end: 4.75rem;
+    z-index: 100002;
+    pointer-events: auto;
+  }
+
+  @media (max-width: 720px) {
+    .layout-palette-shell {
+      inset-inline-start: 0.75rem;
+      inset-inline-end: 0.75rem;
+      inset-block-end: 5.5rem;
+    }
+  }
+</style>

package/dist/layout-mode/design-palette.svelte.d.ts

@@ -0,0 +1,20 @@
+import { type CanvasPurpose, type LayoutModeComponentType } from './types.js';
+interface Props {
+    open?: boolean;
+    value?: LayoutModeComponentType | null;
+    purpose?: CanvasPurpose;
+    wireframePrompt?: string;
+    wireframe?: boolean;
+    placementCount?: number;
+    sectionCount?: number;
+    onSelect?: (type: LayoutModeComponentType) => void;
+    onDetectSections?: () => void;
+    onPurposeChange?: (purpose: CanvasPurpose) => void;
+    onWireframePromptChange?: (value: string) => void;
+    onDragStart?: (type: LayoutModeComponentType, event: MouseEvent) => void;
+    onClear?: () => void;
+    class?: string;
+}
+declare const DesignPalette: import("svelte").Component<Props, {}, "value" | "open" | "purpose" | "wireframePrompt">;
+type DesignPalette = ReturnType<typeof DesignPalette>;
+export default DesignPalette;

package/dist/layout-mode/element-heuristics.d.ts

@@ -0,0 +1,5 @@
+import type { Rect } from './types.js';
+export declare const INTERACTIVE_TAGS: Set<string>;
+export declare function isElementFixed(el: Element): boolean;
+export declare function isSelectableAreaTarget(el: Element): boolean;
+export declare function rectFromElement(el: Element): Rect;

package/dist/layout-mode/element-heuristics.js

@@ -0,0 +1,51 @@
+export const INTERACTIVE_TAGS = new Set([
+    'a',
+    'article',
+    'button',
+    'img',
+    'input',
+    'label',
+    'option',
+    'section',
+    'select',
+    'summary',
+    'svg',
+    'textarea',
+]);
+export function isElementFixed(el) {
+    let current = el;
+    while (current instanceof HTMLElement) {
+        const style = window.getComputedStyle(current);
+        if (style.position === 'fixed' || style.position === 'sticky')
+            return true;
+        current = current.parentElement;
+    }
+    return false;
+}
+export function isSelectableAreaTarget(el) {
+    if (!(el instanceof HTMLElement || el instanceof SVGElement))
+        return false;
+    const rect = el.getBoundingClientRect();
+    if (rect.width < 4 || rect.height < 4)
+        return false;
+    if (el instanceof HTMLElement) {
+        const style = window.getComputedStyle(el);
+        if (style.display === 'none' || style.visibility === 'hidden')
+            return false;
+    }
+    const tag = el.tagName.toLowerCase();
+    if (INTERACTIVE_TAGS.has(tag))
+        return true;
+    if (el.children.length === 0)
+        return Boolean(el.textContent?.trim());
+    return Boolean(el.textContent?.trim()) && el.children.length <= 2;
+}
+export function rectFromElement(el) {
+    const rect = el.getBoundingClientRect();
+    return {
+        x: rect.x,
+        y: rect.y,
+        width: rect.width,
+        height: rect.height,
+    };
+}

package/dist/layout-mode/freeze.d.ts

@@ -0,0 +1,6 @@
+export declare const originalSetTimeout: typeof setTimeout;
+export declare const originalSetInterval: typeof setInterval;
+export declare const originalRequestAnimationFrame: typeof requestAnimationFrame;
+export declare function freezeLayoutModeAnimations(): void;
+export declare function unfreezeLayoutModeAnimations(): void;
+export declare function isLayoutModeFrozen(): boolean;

package/dist/layout-mode/freeze.js

@@ -0,0 +1,163 @@
+const STATE_KEY = '__dryui_layout_mode_freeze';
+const STYLE_ID = 'dryui-layout-mode-freeze-styles';
+function getState() {
+    if (typeof window === 'undefined' ||
+        typeof window.setTimeout !== 'function' ||
+        typeof window.setInterval !== 'function' ||
+        typeof window.requestAnimationFrame !== 'function') {
+        return {
+            frozen: false,
+            installed: true,
+            origSetTimeout: setTimeout,
+            origSetInterval: setInterval,
+            origRAF: () => 0,
+            pausedAnimations: [],
+            timeoutQueue: [],
+            rafQueue: [],
+        };
+    }
+    const global = window;
+    if (!global[STATE_KEY]) {
+        global[STATE_KEY] = {
+            frozen: false,
+            installed: false,
+            origSetTimeout: window.setTimeout.bind(window),
+            origSetInterval: window.setInterval.bind(window),
+            origRAF: window.requestAnimationFrame.bind(window),
+            pausedAnimations: [],
+            timeoutQueue: [],
+            rafQueue: [],
+        };
+    }
+    return global[STATE_KEY];
+}
+const state = getState();
+if (typeof window !== 'undefined' &&
+    typeof window.setTimeout === 'function' &&
+    typeof window.setInterval === 'function' &&
+    typeof window.requestAnimationFrame === 'function' &&
+    !state.installed) {
+    window.setTimeout = ((handler, timeout, ...args) => {
+        if (typeof handler === 'string') {
+            return state.origSetTimeout(handler, timeout, ...args);
+        }
+        return state.origSetTimeout((...invokeArgs) => {
+            if (state.frozen) {
+                state.timeoutQueue.push(() => handler(...invokeArgs));
+                return;
+            }
+            handler(...invokeArgs);
+        }, timeout, ...args);
+    });
+    window.setInterval = ((handler, timeout, ...args) => {
+        if (typeof handler === 'string') {
+            return state.origSetInterval(handler, timeout, ...args);
+        }
+        return state.origSetInterval((...invokeArgs) => {
+            if (!state.frozen) {
+                handler(...invokeArgs);
+            }
+        }, timeout, ...args);
+    });
+    window.requestAnimationFrame = ((callback) => {
+        return state.origRAF((timestamp) => {
+            if (state.frozen) {
+                state.rafQueue.push(callback);
+                return;
+            }
+            callback(timestamp);
+        });
+    });
+    state.installed = true;
+}
+function shouldExclude(element) {
+    return Boolean(element?.closest('[data-dryui-feedback]'));
+}
+export const originalSetTimeout = state.origSetTimeout;
+export const originalSetInterval = state.origSetInterval;
+export const originalRequestAnimationFrame = state.origRAF;
+export function freezeLayoutModeAnimations() {
+    if (typeof document === 'undefined' || state.frozen)
+        return;
+    state.frozen = true;
+    state.timeoutQueue = [];
+    state.rafQueue = [];
+    const style = document.getElementById(STYLE_ID) ?? document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = `
+    *:not([data-dryui-feedback]):not([data-dryui-feedback] *) ,
+    *:not([data-dryui-feedback]):not([data-dryui-feedback] *)::before,
+    *:not([data-dryui-feedback]):not([data-dryui-feedback] *)::after {
+      animation-play-state: paused !important;
+      transition: none !important;
+    }
+  `;
+    document.head.appendChild(style);
+    state.pausedAnimations = [];
+    try {
+        document.getAnimations().forEach((animation) => {
+            if (animation.playState !== 'running')
+                return;
+            const target = animation.effect?.target;
+            if (!shouldExclude(target)) {
+                animation.pause();
+                state.pausedAnimations.push(animation);
+            }
+        });
+    }
+    catch {
+        // Not all browser environments expose getAnimations.
+    }
+    document.querySelectorAll('video').forEach((video) => {
+        if (!video.paused) {
+            video.dataset.wasPaused = 'false';
+            video.pause();
+        }
+    });
+}
+export function unfreezeLayoutModeAnimations() {
+    if (typeof document === 'undefined' || !state.frozen)
+        return;
+    state.frozen = false;
+    const timeoutQueue = state.timeoutQueue;
+    state.timeoutQueue = [];
+    for (const callback of timeoutQueue) {
+        state.origSetTimeout(() => {
+            if (state.frozen) {
+                state.timeoutQueue.push(callback);
+                return;
+            }
+            callback();
+        }, 0);
+    }
+    const rafQueue = state.rafQueue;
+    state.rafQueue = [];
+    for (const callback of rafQueue) {
+        state.origRAF((timestamp) => {
+            if (state.frozen) {
+                state.rafQueue.push(callback);
+                return;
+            }
+            callback(timestamp);
+        });
+    }
+    for (const animation of state.pausedAnimations) {
+        try {
+            animation.play();
+        }
+        catch {
+            // ignore resume failures
+        }
+    }
+    state.pausedAnimations = [];
+    document.getElementById(STYLE_ID)?.remove();
+    document.querySelectorAll('video').forEach((video) => {
+        if (video.dataset.wasPaused === 'false') {
+            video.play().catch(() => { });
+            delete video.dataset.wasPaused;
+        }
+    });
+}
+export function isLayoutModeFrozen() {
+    return state.frozen;
+}