@aiden-voice/widget 0.7.3 → 0.8.0

package/README.md

@@ -72,6 +72,35 @@ init({
   short-lived JWT to the page some other way. The widget itself never
   holds, requests, or sees a secret key under any circumstance.
 
+Session tokens are short-lived (30 minutes), and a visitor can keep a page
+open much longer before using the chat. The widget renews its session when
+needed: before a request, if the token has run out or will within a minute,
+and once after a `401`, retrying the request once. Conversations continue
+across renewals.
+
+- With `publishableKey` it mints a new session itself; nothing to do. Each
+  renewal counts toward the key's daily session quota, but only when someone
+  uses the chat after the token ran out (there is no background timer).
+- With `sessionToken` it can't mint (that needs your secret key), so pass
+  `getSessionToken`: a function that fetches a fresh token from your backend
+  the same way you got the first. It is only called when a new token is
+  needed, and may return the token or a promise of it:
+
+  ```js
+  window.whooAidenWidget.init({
+    sessionToken: initialToken,
+    getSessionToken: async () => {
+      const response = await fetch('/api/aiden-session', { method: 'POST' })
+      return (await response.json()).token
+    },
+  })
+  ```
+
+  Without it, or when it fails or returns an unusable token, the visitor sees
+  "This chat session has expired. Reload the page to continue." and their
+  message is put back in the message box. A page served with an already
+  expired `sessionToken` also tries `getSessionToken` before giving up.
+
 Branding (`color`, `inkColor`, `accentColor`, `name`) follows one rule in
 both modes: **a value you pass to `init()` always wins**, anything you leave
 out is filled in from the agent's settings in whoo-aiden, and anything still
@@ -97,6 +126,9 @@ throws synchronously, at call time, if you pass both or neither.
 | --- | --- | --- |
 | `publishableKey` | Public key used to mint a session server-side. Mutually exclusive with `sessionToken`. | none (required unless `sessionToken` is set) |
 | `sessionToken` | A pre-minted session JWT from your own backend. Mutually exclusive with `publishableKey`. | none (required unless `publishableKey` is set) |
+| `getSessionToken` | `sessionToken` mode only: a function returning a fresh session token (or a promise of one) from your backend, called when the current one has run out or is refused. Without it an expired session ends the chat until the page is reloaded. Ignored, with a warning, with `publishableKey` or when not a function. | none |
+| `language` | Language of the widget's own text, as a BCP 47 tag (`'fr'`, `'pt-BR'`, `'zh-CN'`). Without it the widget follows the page's `<html lang>`, then English. See [Language](#language). | the page's language, else `'en'` |
+| `messages` | Replaces individual built-in strings in the active language, e.g. `{ newConversation: 'Start over' }`. See [Language](#language). | none |
 | `position` | Launcher/panel corner: `'bottom-right'` or `'bottom-left'`. | `'bottom-right'` |
 | `color` | Primary accent color (any valid CSS color). Overrides the color configured in whoo-aiden; omit it to use that one. | whoo-aiden's, else `'#4f46e5'` |
 | `inkColor` | Body text color (chat title and replies). Darkened automatically if needed to stay readable. Overrides the color configured in whoo-aiden; omit it to use that one. | whoo-aiden's, else `'#111111'` |
@@ -110,13 +142,66 @@ throws synchronously, at call time, if you pass both or neither.
 | `emptyStateImageUrl` | Image (e.g. a brand lockup) shown above the greeting while the conversation is empty. `https:` or `data:image/` only. Removed if it fails to load. | none |
 | `emptyStateImageAlt` | Alt text for `emptyStateImageUrl`. Set it when the image carries meaning (e.g. your brand name); omit it for a purely decorative image. | none (decorative) |
 | `showFeedback` | Show thumbs up/down controls under each reply so visitors can rate answers (a thumbs-down opens an optional correction form). | `false` (hidden) |
-| `zIndex` | Stacking level of the launcher and panel over your page. The default sits above carousels, sticky headers and most overlays, while leaving room above it for a cookie or consent modal. Lower it if one of your own layers should cover the chat (see the accessibility note below). An invalid value logs a warning and uses the default. | `2147483000` |
+| `zIndex` | Stacking level of the launcher and panel over your page. The default sits above carousels, sticky headers and most overlays, while leaving room above it for a cookie or consent modal. Lower it if one of your own layers should cover the chat (see the accessibility note below). While the panel fills the screen (a viewport 400px wide or less, or 420px tall or less), it is a modal dialog drawn above everything, whatever `zIndex` says. An invalid value logs a warning and uses the default. | `2147483000` |
 | `apiBaseUrl` | Override the whoo-aiden API host the widget talks to. | `'https://api.aidenvoice.com'` |
 
 ### When something else already owns the corner
 
 Some third-party overlays (accessibility toolbars, chat or cookie widgets) sit at the maximum possible z-index, `2147483647`, in the same corner. No `zIndex` value can beat that: at an equal level, whichever element comes later in the page wins, and those overlays are usually injected after the widget. Move the widget to the other corner with `position: 'bottom-left'` instead.
 
+## Language
+
+The widget's own text (buttons, labels, status and error messages, and what screen readers announce) comes in eleven languages: English (`en`), French (`fr`), Spanish (`es`), Portuguese (`pt`), German (`de`), Italian (`it`), Japanese (`ja`), Simplified Chinese (`zh`), Russian (`ru`), Hindi (`hi`) and Arabic (`ar`).
+
+- **How the language is chosen:** the `language` option if you pass one, then your page's `<html lang>`, then English. So a French page gets a French widget without any setup. An unsupported `language` value is ignored with a console warning; an unsupported page language falls back to English silently.
+- **Regional tags** match their language: `fr-CA` is French, any `pt-*` gets Brazilian Portuguese, any `es-*` gets Latin American Spanish. Simplified Chinese matches `zh`, `zh-CN`, `zh-SG` and `zh-Hans`. Traditional Chinese (`zh-TW`, `zh-HK`, `zh-Hant`) is not supported and falls back to English.
+- **Decided once, at `init()`.** If your single-page app changes `<html lang>` later, pass `language` (unmount and `init()` again to switch).
+- **Arabic is right to left:** the panel's layout mirrors (the visitor's messages on the left). The corner set by `position` doesn't change.
+- **Not translated:** the agent's replies (the model answers in whatever language it does), and `greeting`, `title` and `name`, which you write in the language you want. Each message's text takes its direction from its own content, so an English reply in an Arabic widget, or the reverse, still reads correctly.
+- **The widget marks its own language** (`lang` and `dir` on its root, naming the variant it ships: `pt-BR`, `es-419`, `zh-Hans`), so screen readers pronounce it correctly even on a page in another language.
+- **Upgrading from a version before 0.8.0:** a page whose `<html lang>` is one of these languages now gets the widget in that language, where it was English before. Pass `language: 'en'` to keep it in English.
+
+**Changing the wording.** `messages` replaces any built-in string in the active language. Write overrides in that language, or set `language` to the language of your overrides. `chatWith` takes `{name}`, the agent's name. Unknown keys, and values that aren't non-blank strings, are ignored with a console warning.
+
+```js
+window.whooAidenWidget.init({
+  publishableKey: 'pk_live_…',
+  language: 'es',
+  messages: { newConversation: 'Empezar de nuevo' },
+})
+```
+
+| Key | English | Where |
+|---|---|---|
+| `openChat` | Open chat | launcher name, closed |
+| `closeChat` | Close chat | launcher name while open, header ✕ |
+| `chatWith` | Chat with {name} | panel title and dialog name (unless `title` is set) |
+| `newConversation` | New conversation | header button |
+| `conversation` | Conversation | message list region name |
+| `you` | You | screen-reader speaker label on the visitor's messages |
+| `message` | Message | message box label |
+| `send` | Send | composer button |
+| `lookingItUp` | Looking that up for you… | slow-reply notice |
+| `goodResponse` | Good response | thumbs-up name |
+| `badResponse` | Bad response | thumbs-down name |
+| `additionalFeedback` | Additional feedback | feedback text field label |
+| `feedbackPlaceholder` | What was wrong? (optional) | feedback text field placeholder |
+| `feedbackCategory` | Feedback category | feedback select label |
+| `selectReason` | Select a reason (optional) | feedback select first option |
+| `categoryFactual` | Factual error | feedback option |
+| `categoryIncomplete` | Incomplete | feedback option |
+| `categoryTone` | Off tone | feedback option |
+| `categoryOther` | Other | feedback option |
+| `submit` | Submit | feedback form button |
+| `cancel` | Cancel | feedback form button |
+| `feedbackThanks` | Thanks for the feedback | feedback status |
+| `feedbackFailed` | Couldn't send feedback | feedback status |
+| `conversationCleared` | Conversation cleared | screen-reader announcement |
+| `genericError` | Something went wrong, please try again. | error alert |
+| `sessionExpired` | This chat session has expired. Reload the page to continue. | error alert |
+
+**About the translations:** they were machine-drafted and cross-checked by independent AI agents (back-translation, critique, and rendering checks), not reviewed by native speakers. [docs/translation-verification.md](docs/translation-verification.md) records every check. If any wording reads wrong, override it with `messages`, and please tell us.
+
 ## Theming
 
 `color`, `inkColor` and `accentColor` set the brand colors, and the widget calculates the rest (the text on your color, the header text, and so on) so everything stays readable. When an edge case breaks that, the `theme` option overrides any individual color, the font, and the launcher icons.
@@ -441,9 +526,10 @@ responsibility:
   accent for links in replies) get the same treatment: each is darkened
   just enough to stay readable on the reply bubble. See
   `docs/accessibility-report.md` for details.
-- **Page language:** the widget renders inside your page's DOM and
-  inherits language from your document's `<html lang>` attribute; there is
-  no separate widget-level locale override.
+- **Page language:** set `<html lang>` correctly. The widget follows it (or
+  your `language` option, which wins) and marks its own `lang` and `dir`, so
+  screen readers pronounce it correctly even when it differs from your page.
+  See [Language](#language).
 - **Don't hide the mount point:** don't place the widget's container (or
   move it, via your own script) inside an element with `aria-hidden="true"`
   or `inert` — that hides it from assistive technology regardless of the
@@ -473,19 +559,23 @@ The widget distinguishes two deliberately different error tiers:
   broken-looking ever appears on the page.
 - **Failures once the widget is already visible and in an active chat**
   (a network error, an SSE connection dropping mid-stream, an error
-  response from the server, a session that runs out while the page is open)
-  show a short, non-technical inline message in the chat panel itself (e.g.
-  "Something went wrong, please try again"), leaving any partial response
-  already rendered in place above it.
+  response from the server) show a short, non-technical inline message in the
+  chat panel itself (e.g. "Something went wrong, please try again"), leaving
+  any partial response already rendered in place above it. A session that
+  runs out while the page is open is renewed (see Usage); only when that is
+  impossible does the panel say "This chat session has expired. Reload the
+  page to continue." instead.
 
 How a bad `sessionToken` is caught at start-up, without the widget ever
 holding a key to check its signature:
 
-- If the token is a JWT whose `exp` has already passed, `init()` treats it as
-  an init failure straight away, with no network request. A token the widget
+- If the token is a JWT whose `exp` has already passed, `init()` asks
+  `getSessionToken` for a new one when you passed it, and otherwise treats it
+  as an init failure straight away, with no network request. A token the widget
   can't read (not a JWT, no `exp`) is never rejected locally.
 - Otherwise, when the widget looks up the agent's branding with the token
-  (see above), a `401` or `403` answer is an init failure too. That lookup is
+  (see above), a `403` answer is an init failure too, and so is a `401` unless
+  `getSessionToken` supplies a token the server accepts. That lookup is
   skipped when you pass every branding value yourself, so in that case only the
   expiry check applies and a token the server would refuse for another reason
   fails on the visitor's first message instead.

package/dist/components/Composer.d.ts

@@ -1,8 +1,10 @@
 import { RefObject } from 'preact';
-export declare function Composer({ value, onChange, onSend, disabled, inputRef, }: {
+import { WidgetMessages } from '../i18n/messages';
+export declare function Composer({ value, onChange, onSend, disabled, inputRef, text, }: {
     value: string;
     onChange: (value: string) => void;
     onSend: () => void;
     disabled: boolean;
     inputRef?: RefObject<HTMLInputElement | null>;
+    text?: WidgetMessages;
 }): import('preact').JSX.Element;

package/dist/components/Launcher.d.ts

@@ -1,6 +1,7 @@
 import { RefObject } from 'preact';
+import { WidgetMessages } from '../i18n/messages';
 import { LauncherIcon, LauncherOpenIcon } from '../types';
-export declare function Launcher({ isOpen, onClick, iconUrl, icon, openIconUrl, openIcon, buttonRef, }: {
+export declare function Launcher({ isOpen, onClick, iconUrl, icon, openIconUrl, openIcon, buttonRef, text, }: {
     isOpen: boolean;
     onClick: () => void;
     iconUrl?: string;
@@ -8,4 +9,5 @@ export declare function Launcher({ isOpen, onClick, iconUrl, icon, openIconUrl,
     openIconUrl?: string;
     openIcon?: LauncherOpenIcon;
     buttonRef?: RefObject<HTMLButtonElement | null>;
+    text?: WidgetMessages;
 }): import('preact').JSX.Element;

package/dist/components/MessageFeedback.d.ts

@@ -1,6 +1,7 @@
 import { RefObject } from 'preact';
 import { FeedbackCategory, MessageFeedbackState } from '../controller';
-export declare function MessageFeedback({ state, containerRef, onThumbsUp, onThumbsDown, onDraftChange, onSubmitDetailed, onCancel, }: {
+import { WidgetMessages } from '../i18n/messages';
+export declare function MessageFeedback({ state, containerRef, onThumbsUp, onThumbsDown, onDraftChange, onSubmitDetailed, onCancel, text, }: {
     state: MessageFeedbackState;
     containerRef?: RefObject<HTMLElement>;
     onThumbsUp: () => void;
@@ -8,4 +9,5 @@ export declare function MessageFeedback({ state, containerRef, onThumbsUp, onThu
     onDraftChange: (correction: string, category: '' | FeedbackCategory) => void;
     onSubmitDetailed: (correction: string, category: '' | FeedbackCategory) => void;
     onCancel: () => void;
+    text?: WidgetMessages;
 }): import('preact').JSX.Element;

package/dist/components/MessageList.d.ts

@@ -1,7 +1,8 @@
 import { FeedbackCategory, Message, MessageFeedbackState } from '../controller';
+import { WidgetMessages } from '../i18n/messages';
 type DraftChangeHandler = (messageId: string, correction: string, category: '' | FeedbackCategory) => void;
 type SubmitHandler = (messageId: string, correction: string, category: '' | FeedbackCategory) => void;
-export declare function MessageList({ messages, messageFeedback, announcement, emptyStateImage, agentName, showFeedback, isStreaming, isSlowResponse, onThumbsUp, onThumbsDown, onDraftChange, onSubmitDetailed, onCancelFeedback, }: {
+export declare function MessageList({ messages, messageFeedback, announcement, emptyStateImage, agentName, showFeedback, isStreaming, isSlowResponse, onThumbsUp, onThumbsDown, onDraftChange, onSubmitDetailed, onCancelFeedback, text, }: {
     messages: Message[];
     messageFeedback: Record<string, MessageFeedbackState>;
     announcement: string | null;
@@ -18,5 +19,6 @@ export declare function MessageList({ messages, messageFeedback, announcement, e
     onDraftChange?: DraftChangeHandler;
     onSubmitDetailed: SubmitHandler;
     onCancelFeedback: (messageId: string) => void;
+    text?: WidgetMessages;
 }): import('preact').JSX.Element;
 export {};

package/dist/config.d.ts

@@ -1,3 +1,4 @@
+import { WidgetMessages } from './i18n/messages';
 import { ThemeColorOverrides } from './themeRoles';
 import { LauncherIcon, LauncherOpenIcon, WidgetConfig } from './types';
 export declare const DEFAULT_API_BASE_URL = "https://api.aidenvoice.com";
@@ -6,6 +7,8 @@ export declare function resolveZIndex(zIndex: unknown): number;
 export declare const DEFAULT_AGENT_NAME = "Aiden";
 export declare function trimmedName(name: unknown): string;
 export declare function validateConfig(config: WidgetConfig): void;
+export declare function normalizeGetSessionToken(config: WidgetConfig): (() => string | Promise<string>) | undefined;
+export declare function normalizeMessages(value: unknown): Partial<WidgetMessages>;
 export declare function safeFontFamily(value: unknown): string | undefined;
 export interface NormalizedTheme {
     colors: ThemeColorOverrides;

package/dist/controller.d.ts

@@ -1,7 +1,10 @@
 import { NormalizedTheme } from './config';
+import { SupportedLanguage } from './i18n';
+import { WidgetMessages } from './i18n/messages';
 import { WidgetConfig } from './types';
 export declare const SLOW_RESPONSE_DELAY_MS = 8000;
 export declare const BRANDING_LOOKUP_WAIT_MS = 3000;
+export declare const TOKEN_RENEWAL_MARGIN_MS = 60000;
 export interface Message {
     role: 'user' | 'assistant';
     content: string;
@@ -36,6 +39,9 @@ export declare class WidgetController {
     private state;
     private readonly listeners;
     private sessionToken;
+    private sessionTokenExpiresAt;
+    private tokenRenewal;
+    private readonly getSessionToken;
     private conversationId;
     private readonly storageIdentifier;
     private activeRequestController;
@@ -46,6 +52,10 @@ export declare class WidgetController {
     readonly emptyStateImageUrl: string | undefined;
     readonly emptyStateImageAlt: string;
     readonly showFeedback: boolean;
+    readonly text: WidgetMessages;
+    readonly language: SupportedLanguage;
+    readonly languageTag: string;
+    readonly dir: 'ltr' | 'rtl';
     constructor(config: WidgetConfig);
     getState(): WidgetState;
     subscribe(listener: Listener): () => void;
@@ -63,5 +73,9 @@ export declare class WidgetController {
     setFeedbackDraft(messageId: string, correction: string, category: '' | FeedbackCategory): void;
     cancelFeedback(messageId: string): void;
     submitFeedback(messageId: string, rating: 'up' | 'down', correction?: string, category?: FeedbackCategory): Promise<void>;
+    private currentToken;
+    private renewToken;
+    private fetchNewToken;
+    private withSession;
 }
 export {};

package/dist/i18n/index.d.ts

@@ -0,0 +1,26 @@
+import { WidgetMessages } from './messages';
+declare const DICTIONARIES: {
+    readonly en: WidgetMessages;
+    readonly fr: WidgetMessages;
+    readonly es: WidgetMessages;
+    readonly pt: WidgetMessages;
+    readonly de: WidgetMessages;
+    readonly it: WidgetMessages;
+    readonly ja: WidgetMessages;
+    readonly zh: WidgetMessages;
+    readonly ru: WidgetMessages;
+    readonly hi: WidgetMessages;
+    readonly ar: WidgetMessages;
+};
+export type SupportedLanguage = keyof typeof DICTIONARIES;
+export declare const SUPPORTED_LANGUAGES: readonly SupportedLanguage[];
+export declare function messagesFor(language: SupportedLanguage): WidgetMessages;
+export declare function resolveLanguage(option: unknown, pageLang: unknown): {
+    language: SupportedLanguage;
+    tag: string;
+    dir: 'ltr' | 'rtl';
+};
+export declare function format(template: string, values: {
+    name: string;
+}): string;
+export type { WidgetMessages };

package/dist/i18n/locales/ar.d.ts

@@ -0,0 +1,2 @@
+import { WidgetMessages } from '../messages';
+export declare const ar: WidgetMessages;

package/dist/i18n/locales/de.d.ts

@@ -0,0 +1,2 @@
+import { WidgetMessages } from '../messages';
+export declare const de: WidgetMessages;

package/dist/i18n/locales/es.d.ts

@@ -0,0 +1,2 @@
+import { WidgetMessages } from '../messages';
+export declare const es: WidgetMessages;

package/dist/i18n/locales/fr.d.ts

@@ -0,0 +1,2 @@
+import { WidgetMessages } from '../messages';
+export declare const fr: WidgetMessages;

package/dist/i18n/locales/hi.d.ts

@@ -0,0 +1,2 @@
+import { WidgetMessages } from '../messages';
+export declare const hi: WidgetMessages;

package/dist/i18n/locales/it.d.ts

@@ -0,0 +1,2 @@
+import { WidgetMessages } from '../messages';
+export declare const it: WidgetMessages;

package/dist/i18n/locales/ja.d.ts

@@ -0,0 +1,2 @@
+import { WidgetMessages } from '../messages';
+export declare const ja: WidgetMessages;

package/dist/i18n/locales/pt.d.ts

@@ -0,0 +1,2 @@
+import { WidgetMessages } from '../messages';
+export declare const pt: WidgetMessages;

package/dist/i18n/locales/ru.d.ts

@@ -0,0 +1,2 @@
+import { WidgetMessages } from '../messages';
+export declare const ru: WidgetMessages;

package/dist/i18n/locales/zh.d.ts

@@ -0,0 +1,2 @@
+import { WidgetMessages } from '../messages';
+export declare const zh: WidgetMessages;

package/dist/i18n/messages.d.ts

@@ -0,0 +1,30 @@
+export interface WidgetMessages {
+    openChat: string;
+    closeChat: string;
+    chatWith: string;
+    newConversation: string;
+    conversation: string;
+    you: string;
+    message: string;
+    send: string;
+    lookingItUp: string;
+    goodResponse: string;
+    badResponse: string;
+    additionalFeedback: string;
+    feedbackPlaceholder: string;
+    feedbackCategory: string;
+    selectReason: string;
+    categoryFactual: string;
+    categoryIncomplete: string;
+    categoryTone: string;
+    categoryOther: string;
+    submit: string;
+    cancel: string;
+    feedbackThanks: string;
+    feedbackFailed: string;
+    conversationCleared: string;
+    genericError: string;
+    sessionExpired: string;
+}
+export declare const ENGLISH: WidgetMessages;
+export declare const MESSAGE_KEYS: (keyof WidgetMessages)[];

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 import { LauncherIcon, LauncherOpenIcon, WidgetConfig, WidgetHandle, WidgetLayout, WidgetTheme } from './types';
 export declare function init(config: WidgetConfig): WidgetHandle;
+export { SUPPORTED_LANGUAGES } from './i18n';
+export type { WidgetMessages } from './i18n/messages';
 export type { ContrastWarning, ResolvedTheme, ThemeInput } from './theme';
 export { resolveTheme } from './theme';
 export type { ThemeColorOverrides, ThemeColorRole } from './themeRoles';

package/dist/sessionToken.d.ts

@@ -1 +1,3 @@
+export declare function sessionTokenExp(token: string): number | null;
 export declare function isExpiredSessionToken(token: string, nowMs?: number): boolean;
+export declare function receivedTokenExpiresAt(token: string, receivedAtMs?: number): number | null;

package/dist/types.d.ts

@@ -1,3 +1,4 @@
+import { WidgetMessages } from './i18n/messages';
 export type LauncherIcon = 'chat' | 'message' | 'sparkle';
 export type LauncherOpenIcon = 'chevron-down' | 'close';
 export interface WidgetTheme {
@@ -72,6 +73,27 @@ export interface WidgetLayout {
 export interface WidgetConfig {
     publishableKey?: string;
     sessionToken?: string;
+    /**
+     * `sessionToken` mode only. Called when the session token has run out (or
+     * the server refuses it), to get a fresh one from your backend, which mints
+     * it the same way as the first. Without it, an expired session ends the
+     * chat until the page is reloaded. May return the token or a promise of it.
+     * (With `publishableKey` the widget renews its session by itself.)
+     */
+    getSessionToken?: () => string | Promise<string>;
+    /**
+     * The language of the widget's own text, as a BCP 47 tag ('fr', 'pt-BR',
+     * 'zh-CN'). Without it the widget follows the page's <html lang>, then
+     * English. Supported: en, fr, es, pt, de, it, ja, zh (Simplified), ru, hi,
+     * ar (right to left). An unsupported value is ignored with a warning.
+     */
+    language?: string;
+    /**
+     * Replaces individual built-in strings in whichever language is active,
+     * e.g. { newConversation: 'Start over' }. `chatWith` takes {name}.
+     * Unknown keys and blank or non-string values are ignored with a warning.
+     */
+    messages?: Partial<WidgetMessages>;
     position?: 'bottom-right' | 'bottom-left';
     /**
      * Primary accent color. Overrides the color configured in whoo-aiden, in

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const WIDGET_VERSION = "0.7.3";
+export declare const WIDGET_VERSION = "0.8.0";

package/dist/viewport.d.ts

@@ -2,3 +2,4 @@ export declare const FULL_SCREEN_QUERY = "(max-width: 400px), (max-height: 420px
 export declare const FIT_VISIBLE_ATTRIBUTE = "data-fit-visible";
 export declare function followVisualViewport(panel: HTMLElement): () => void;
 export declare function lockPageScrollWhileFullScreen(): () => void;
+export declare function modalWhileFullScreen(panel: HTMLDialogElement): () => void;