@readium/navigator 1.3.4 → 2.0.0-beta.10

package/src/epub/preferences/EpubSettings.ts

@@ -0,0 +1,239 @@
+import { ConfigurableSettings } from "../../preferences/Configurable";
+import { LayoutStrategy, TextAlignment, Theme } from "../../preferences/Types";
+import { EpubDefaults } from "./EpubDefaults";
+import { EpubPreferences } from "./EpubPreferences";
+
+import { sMLWithRequest } from "../../helpers";
+
+export interface IEpubSettings {
+  backgroundColor?: string | null,
+  blendFilter?: boolean | null,
+  columnCount?: number | null,
+  constraint?: number | null,
+  darkenFilter?: boolean | number | null,
+  deprecatedFontSize?: boolean | null,
+  fontFamily?: string | null,
+  fontSize?: number | null,
+  fontSizeNormalize?: boolean | null,
+  fontOpticalSizing?: boolean | null,
+  fontWeight?: number | null,
+  fontWidth?: number | null,
+  hyphens?: boolean | null,
+  invertFilter?: boolean | number | null,
+  invertGaijiFilter: boolean | number | null,
+  iOSPatch?: boolean | null,
+  iPadOSPatch?: boolean | null,
+  layoutStrategy?: LayoutStrategy | null,
+  letterSpacing?: number | null,
+  ligatures?: boolean | null,
+  lineHeight?: number | null,
+  linkColor?: string | null,
+  maximalLineLength?: number | null,
+  minimalLineLength?: number | null,
+  noRuby?: boolean | null,
+  optimalLineLength?: number | null,
+  pageGutter?: number | null,
+  paragraphIndent?: number | null,
+  paragraphSpacing?: number | null,
+  scroll?: boolean | null,
+  scrollPaddingTop?: number | null,
+  scrollPaddingBottom?: number | null,
+  // scrollPaddingLeft?: number | null,
+  // scrollPaddingRight?: number | null,
+  selectionBackgroundColor?: string | null,
+  selectionTextColor?: string | null,
+  textAlign?: TextAlignment | null,
+  textColor?: string | null,
+  textNormalization?: boolean | null,
+  theme?: Theme | null,
+  visitedColor?: string | null,
+  wordSpacing?: number | null
+}
+
+export class EpubSettings implements ConfigurableSettings {
+  backgroundColor: string | null;
+  blendFilter: boolean | null;
+  columnCount: number | null;
+  constraint: number;
+  darkenFilter: boolean | number | null;
+  deprecatedFontSize: boolean | null;
+  fontFamily: string | null;
+  fontSize: number | null;
+  fontSizeNormalize: boolean | null;
+  fontOpticalSizing: boolean | null;
+  fontWeight: number | null;
+  fontWidth: number | null;
+  hyphens: boolean | null;
+  invertFilter: boolean | number | null;
+  invertGaijiFilter: boolean | number | null;
+  iOSPatch: boolean;
+  iPadOSPatch: boolean;
+  layoutStrategy: LayoutStrategy | null;
+  letterSpacing: number | null;
+  ligatures: boolean | null;
+  lineHeight: number | null;
+  linkColor: string | null;
+  maximalLineLength: number | null;
+  minimalLineLength: number | null;
+  noRuby: boolean | null;
+  optimalLineLength: number;
+  pageGutter: number | null;
+  paragraphIndent: number | null;
+  paragraphSpacing: number | null;
+  scroll: boolean | null;
+  scrollPaddingTop: number | null;
+  scrollPaddingBottom: number | null;
+  // scrollPaddingLeft: number | null;
+  // scrollPaddingRight: number | null;
+  selectionBackgroundColor: string | null;
+  selectionTextColor: string | null;
+  textAlign: TextAlignment | null;
+  textColor: string | null;
+  textNormalization: boolean | null;
+  theme: Theme | null;
+  visitedColor: string | null;
+  wordSpacing: number | null;
+
+  constructor(preferences: EpubPreferences, defaults: EpubDefaults) {
+    this.backgroundColor = preferences.backgroundColor || defaults.backgroundColor || null;
+    this.blendFilter = typeof preferences.blendFilter === "boolean" 
+      ? preferences.blendFilter 
+      : defaults.blendFilter ?? null;
+    this.columnCount = preferences.columnCount !== undefined 
+      ? preferences.columnCount 
+      : defaults.columnCount !== undefined 
+        ? defaults.columnCount 
+        : null;
+    this.constraint = preferences.constraint || defaults.constraint;
+    this.darkenFilter = typeof preferences.darkenFilter === "boolean" 
+      ? preferences.darkenFilter 
+      : defaults.darkenFilter ?? null;
+    this.deprecatedFontSize = typeof preferences.deprecatedFontSize === "boolean" 
+      ? preferences.deprecatedFontSize 
+      : defaults.deprecatedFontSize ?? null;
+    this.fontFamily = preferences.fontFamily || defaults.fontFamily || null;
+    this.fontSize = preferences.fontSize !== undefined 
+      ? preferences.fontSize 
+      : defaults.fontSize !== undefined 
+        ? defaults.fontSize 
+        : null;
+    this.fontSizeNormalize = typeof preferences.fontSizeNormalize === "boolean" 
+      ? preferences.fontSizeNormalize 
+      : defaults.fontSizeNormalize ?? null;
+    this.fontOpticalSizing = typeof preferences.fontOpticalSizing === "boolean" 
+      ? preferences.fontOpticalSizing 
+      : defaults.fontOpticalSizing ?? null;
+    this.fontWeight = preferences.fontWeight !== undefined 
+      ? preferences.fontWeight 
+      : defaults.fontWeight !== undefined 
+        ? defaults.fontWeight 
+        : null;
+    this.fontWidth = preferences.fontWidth !== undefined 
+      ? preferences.fontWidth 
+      : defaults.fontWidth !== undefined 
+        ? defaults.fontWidth 
+        : null;
+    this.hyphens = typeof preferences.hyphens === "boolean" 
+      ? preferences.hyphens 
+      : defaults.hyphens ?? null;
+    this.invertFilter = typeof preferences.invertFilter === "boolean" 
+      ? preferences.invertFilter 
+      : defaults.invertFilter ?? null;
+    this.invertGaijiFilter = typeof preferences.invertGaijiFilter === "boolean" 
+      ? preferences.invertGaijiFilter 
+      : defaults.invertGaijiFilter ?? null;
+    this.iOSPatch = this.deprecatedFontSize 
+      ? false 
+      : preferences.iOSPatch === false 
+        ? false 
+        : preferences.iOSPatch === true 
+          ? ((sMLWithRequest.OS.iOS || sMLWithRequest.OS.iPadOS) && sMLWithRequest.iOSRequest === "mobile")
+          : defaults.iOSPatch;
+    this.iPadOSPatch = this.deprecatedFontSize 
+      ? false 
+      : preferences.iPadOSPatch === false 
+        ? false 
+        : preferences.iPadOSPatch === true 
+          ? (sMLWithRequest.OS.iPadOS && sMLWithRequest.iOSRequest === "desktop") 
+          : defaults.iPadOSPatch;
+    this.layoutStrategy = preferences.layoutStrategy || defaults.layoutStrategy || null;
+    this.letterSpacing = preferences.letterSpacing !== undefined 
+      ? preferences.letterSpacing 
+      : defaults.letterSpacing !== undefined 
+        ? defaults.letterSpacing 
+        : null;
+    this.ligatures = typeof preferences.ligatures === "boolean"
+      ? preferences.ligatures 
+      : defaults.ligatures ?? null;
+    this.lineHeight = preferences.lineHeight !== undefined 
+      ? preferences.lineHeight 
+      : defaults.lineHeight !== undefined 
+        ? defaults.lineHeight 
+        : null;
+    this.linkColor = preferences.linkColor || defaults.linkColor || null;
+    this.maximalLineLength = preferences.maximalLineLength === null 
+      ? null 
+      : preferences.maximalLineLength || defaults.maximalLineLength || null;
+    this.minimalLineLength = preferences.minimalLineLength === null 
+      ? null 
+      : preferences.minimalLineLength || defaults.minimalLineLength || null;
+    this.noRuby = typeof preferences.noRuby === "boolean" 
+      ? preferences.noRuby 
+      : defaults.noRuby ?? null;
+    this.optimalLineLength = preferences.optimalLineLength || defaults.optimalLineLength;
+    this.pageGutter = preferences.pageGutter !== undefined 
+      ? preferences.pageGutter 
+      : defaults.pageGutter !== undefined 
+        ? defaults.pageGutter 
+        : null;
+    this.paragraphIndent = preferences.paragraphIndent !== undefined 
+      ? preferences.paragraphIndent 
+      : defaults.paragraphIndent !== undefined 
+        ? defaults.paragraphIndent 
+        : null;
+    this.paragraphSpacing = preferences.paragraphSpacing !== undefined 
+      ? preferences.paragraphSpacing 
+      : defaults.paragraphSpacing !== undefined 
+        ? defaults.paragraphSpacing 
+        : null;
+    this.scroll = typeof preferences.scroll === "boolean" 
+      ? preferences.scroll 
+      : defaults.scroll ?? null;
+    this.scrollPaddingTop = preferences.scrollPaddingTop !== undefined 
+      ? preferences.scrollPaddingTop 
+      : defaults.scrollPaddingTop !== undefined 
+        ? defaults.scrollPaddingTop 
+        : null;
+    this.scrollPaddingBottom = preferences.scrollPaddingBottom !== undefined 
+      ? preferences.scrollPaddingBottom 
+      : defaults.scrollPaddingBottom !== undefined 
+        ? defaults.scrollPaddingBottom 
+        : null;
+    /* 
+    this.scrollPaddingLeft = preferences.scrollPaddingLeft !== undefined 
+      ? preferences.scrollPaddingLeft 
+      : defaults.scrollPaddingLeft !== undefined 
+        ? defaults.scrollPaddingLeft 
+        : null;
+    this.scrollPaddingRight = preferences.scrollPaddingRight !== undefined 
+      ? preferences.scrollPaddingRight 
+      : defaults.scrollPaddingRight !== undefined 
+        ? defaults.scrollPaddingRight 
+        : null;
+    */
+    this.selectionBackgroundColor = preferences.selectionBackgroundColor || defaults.selectionBackgroundColor || null;
+    this.selectionTextColor = preferences.selectionTextColor || defaults.selectionTextColor || null;
+    this.textAlign = preferences.textAlign || defaults.textAlign || null;
+    this.textColor = preferences.textColor || defaults.textColor || null;
+    this.textNormalization = typeof preferences.textNormalization === "boolean" 
+      ? preferences.textNormalization 
+      : defaults.textNormalization ?? null;
+    this.theme = preferences.theme || defaults.theme || null;
+    this.visitedColor = preferences.visitedColor || defaults.visitedColor || null;
+    this.wordSpacing = preferences.wordSpacing !== undefined 
+      ? preferences.wordSpacing 
+      : defaults.wordSpacing !== undefined 
+        ? defaults.wordSpacing 
+        : null;
+  }
+}

package/src/epub/preferences/guards.ts

@@ -0,0 +1,86 @@
+export function ensureLessThanOrEqual<T extends number | null | undefined>(value: T, compareTo: T): T | undefined {
+  if (value === undefined || value === null) {
+    return value;
+  }
+  if (compareTo === undefined || compareTo === null) {
+    return value;
+  }
+  return value <= compareTo ? value : undefined;
+}
+
+export function ensureMoreThanOrEqual<T extends number | null | undefined>(value: T, compareTo: T): T | undefined {
+  if (value === undefined || value === null) {
+    return value;
+  }
+  if (compareTo === undefined || compareTo === null) {
+    return value;
+  }
+  return value >= compareTo ? value : undefined;
+}
+
+export function ensureString(value: string | null | undefined): string | null | undefined {
+  if (typeof value === "string") {
+    return value;
+  } else if (value === null) {
+    return null;
+  } else {
+    return undefined;
+  }
+}
+
+export function ensureBoolean(value: boolean | null | undefined): boolean | null | undefined {
+  return typeof value === "boolean" 
+    ? value 
+    : value === undefined || value === null 
+      ? value 
+      : undefined;
+}
+
+
+export function ensureEnumValue<T extends string>(value: T | null | undefined, enumType: Record<T, string>): T | null | undefined {
+  if (value === undefined) {
+    return undefined;
+  }
+  if (value === null) {
+    return null;
+  }
+  return enumType[value as T] !== undefined ? value : undefined;
+}
+
+export function ensureFilter(filter: boolean | number | null | undefined): boolean | number | null | undefined {
+  if (typeof filter === "boolean") {
+    return filter;
+  } else if (typeof filter === "number" && filter >= 0) {
+    return filter;
+  } else if (filter === null) {
+    return null;
+  } else {
+    return undefined;
+  }
+}
+
+export function ensureNonNegative(value: number | null | undefined): number | null | undefined {
+  if (value === undefined) {
+    return undefined;
+  }
+  if (value === null) {
+    return null;
+  }
+  return value < 0 ? undefined : value;
+}
+
+export function ensureValueInRange(value: number | null | undefined, range: [number, number]): number | null | undefined {
+  if (value === undefined) {
+    return undefined;
+  }
+  if (value === null) {
+    return null;
+  }
+  const min = Math.min(...range);
+  const max = Math.max(...range);
+  return value >= min && value <= max ? value : undefined;
+}
+
+export function withFallback<T>(value: T | null | undefined, defaultValue: T | null): T | null {
+  return value === undefined ? defaultValue : value;
+}

package/src/epub/preferences/index.ts

@@ -0,0 +1,4 @@
+export * from "./EpubDefaults";
+export * from "./EpubPreferencesEditor";
+export * from "./EpubPreferences";
+export * from "./EpubSettings";

package/src/helpers/dimensions.ts

@@ -0,0 +1,13 @@
+/**
+ * Returns the "content width" of an element, which is its clientWidth
+ * minus any horizontal padding.
+ *
+ * @param el - The element to measure.
+ */
+export function getContentWidth(el: Element) {
+  const cStyle = getComputedStyle(el);
+  const paddingLeft = parseFloat(cStyle.paddingLeft || "0");
+  const paddingRight = parseFloat(cStyle.paddingRight || "0");
+  return el.clientWidth - paddingLeft - paddingRight;
+}
+

package/src/helpers/index.ts

@@ -1 +1,2 @@
+export * from "./lineLength";
 export * from './sML';

package/src/helpers/lineLength.ts

@@ -0,0 +1,241 @@
+import fontStacks from "@readium/css/css/vars/fontStacks.json";
+
+export interface ICustomFontFace {
+  name: string;
+  url: string;
+}
+
+export interface ILineLengthsConfig {
+  optimalChars: number;
+  minChars?: number | null;
+  maxChars?: number | null;
+  baseFontSize?: number | null;
+  sample?: string | null;
+  pageGutter?: number | null;
+  fontFace?: string | ICustomFontFace | null;
+  letterSpacing?: number | null;
+  wordSpacing?: number | null;
+  isCJK?: boolean | null;
+  getRelative?: boolean | null;
+}
+
+export interface ILineLengths {
+  min: number | null;
+  max: number | null;
+  optimal: number;
+  baseFontSize: number;
+}
+
+const DEFAULT_FONT_SIZE = 16;
+const DEFAULT_FONT_FACE = fontStacks.RS__oldStyleTf;
+
+// Notes: 
+// 
+// We’re “embracing” design limitations of the ch length
+// See https://developer.mozilla.org/en-US/docs/Web/CSS/length#ch
+//
+// Vertical-writing is not implemented yet, as it is not supported in canvas
+// which means it has to be emulated by writing each character with an
+// offset on the y-axis (using fillText), and getting the total height.
+// If you don’t need high accuracy, it’s acceptable to use the one returned with isCJK.
+//
+// Instead of measuring text for min and maximal, we define multipliers
+// at the end, with optimalLineLength as a ref, before returning the lineLengths object.
+
+export class LineLengths {
+  private _canvas: HTMLCanvasElement;
+
+  private _optimalChars: number;
+  private _minChars?: number | null;
+  private _maxChars?: number | null;
+  private _baseFontSize: number;
+  private _fontFace: string | ICustomFontFace;
+  private _sample: string | null;
+  private _pageGutter: number;
+  private _letterSpacing: number;
+  private _wordSpacing: number;
+  private _isCJK: boolean;
+  private _getRelative: boolean;
+  
+  private _padding: number;
+  private _minDivider: number | null;
+  private _maxMultiplier: number | null;
+  private _approximatedWordSpaces: number;
+
+  private _optimalLineLength: number | null = null;
+
+  constructor(config: ILineLengthsConfig) {
+    this._canvas = document.createElement("canvas");
+    this._optimalChars = config.optimalChars;
+    this._minChars = config.minChars;
+    this._maxChars = config.maxChars;
+    this._baseFontSize = config.baseFontSize || DEFAULT_FONT_SIZE;
+    this._fontFace = config.fontFace || DEFAULT_FONT_FACE;
+    this._sample = config.sample || null;
+    this._pageGutter = config.pageGutter || 0;
+    this._letterSpacing = config.letterSpacing 
+      ? Math.round(config.letterSpacing * this._baseFontSize) 
+      : 0;
+    this._wordSpacing = config.wordSpacing 
+      ? Math.round(config.wordSpacing * this._baseFontSize) 
+      : 0;
+    this._isCJK = config.isCJK || false;
+    this._getRelative = config.getRelative || false;
+    this._padding = this._pageGutter * 2;
+    this._minDivider = this._minChars && this._minChars < this._optimalChars 
+      ? this._optimalChars / this._minChars 
+      : this._minChars === null 
+        ? null
+        : 1;
+    this._maxMultiplier = this._maxChars && this._maxChars > this._optimalChars
+      ? this._maxChars / this._optimalChars 
+      : this._maxChars === null 
+        ? null
+        : 1;
+    this._approximatedWordSpaces = LineLengths.approximateWordSpaces(this._optimalChars, this._sample);
+  }
+
+  private updateMultipliers() {
+    this._minDivider = this._minChars && this._minChars < this._optimalChars 
+      ? this._optimalChars / this._minChars 
+      : this._minChars === null 
+        ? null
+        : 1;
+
+    this._maxMultiplier = this._maxChars && this._maxChars > this._optimalChars 
+      ? this._maxChars / this._optimalChars 
+      : this._maxChars === null 
+        ? null
+        : 1;
+  }
+
+  // Batch update to guarantee up-to-date values
+  // Not filtering because pretty much everything can
+  // trigger a recomputation anyway.
+  update(props: Partial<ILineLengthsConfig>) {
+    if (props.optimalChars) this._optimalChars = props.optimalChars;
+    if (props.minChars !== undefined) this._minChars = props.minChars;
+    if (props.maxChars !== undefined) this._maxChars = props.maxChars;
+    if (props.baseFontSize) this._baseFontSize = props.baseFontSize;
+    if (props.fontFace !== undefined) this._fontFace = props.fontFace || DEFAULT_FONT_FACE;
+    if (props.letterSpacing) this._letterSpacing = props.letterSpacing;
+    if (props.wordSpacing) this._wordSpacing = props.wordSpacing;
+    if (props.isCJK != null) this._isCJK = props.isCJK;
+    if (props.pageGutter) this._pageGutter = props.pageGutter;
+    if (props.getRelative) this._getRelative = props.getRelative;
+
+    if (props.sample) {
+      this._sample = props.sample;
+      this._approximatedWordSpaces = LineLengths.approximateWordSpaces(this._optimalChars, this._sample);
+    }
+
+    this.updateMultipliers();
+    this._optimalLineLength = this.getOptimalLineLength();
+  }
+
+  get baseFontSize() {
+    return this._baseFontSize;
+  }
+
+  get minimalLineLength(): number | null {
+    if (!this._optimalLineLength) {
+      this._optimalLineLength = this.getOptimalLineLength();
+    }
+    return this._minDivider !== null 
+      ? Math.round((this._optimalLineLength / this._minDivider) + this._padding) / (this._getRelative ? this._baseFontSize : 1) 
+      : null;
+  }
+
+  get maximalLineLength(): number | null {
+    if (!this._optimalLineLength) {
+      this._optimalLineLength = this.getOptimalLineLength();
+    }
+    return this._maxMultiplier !== null 
+      ? Math.round((this._optimalLineLength * this._maxMultiplier) + this._padding) / (this._getRelative ? this._baseFontSize : 1) 
+      : null;
+  }
+
+  get optimalLineLength(): number {
+    if (!this._optimalLineLength) {
+      this._optimalLineLength = this.getOptimalLineLength();
+    }
+    return Math.round(this._optimalLineLength + this._padding) / (this._getRelative ? this._baseFontSize : 1);
+  }
+
+  get all(): ILineLengths {
+    if (!this._optimalLineLength) {
+      this._optimalLineLength = this.getOptimalLineLength();
+    }
+    return {
+      min: this.minimalLineLength,
+      max: this.maximalLineLength,
+      optimal: this.optimalLineLength,
+      baseFontSize: this._baseFontSize
+    }
+  }
+
+  private static approximateWordSpaces(chars: number, sample: string | null | undefined) {
+    let wordSpaces = 0;
+    if (sample && sample.length >= chars) {
+      const spaceCount = sample.match(/([\s]+)/gi);
+      // Average for number of chars
+      wordSpaces = (spaceCount ? spaceCount.length : 0) * (chars / sample.length);
+    }
+    return wordSpaces;
+  }
+
+  private getLineLengthFallback() {
+    const letterSpace = this._letterSpacing * (this._optimalChars - 1);
+    const wordSpace = this._wordSpacing * this._approximatedWordSpaces;
+    return (this._optimalChars * (this._baseFontSize * 0.5)) + letterSpace + wordSpace;
+  }
+
+  private getOptimalLineLength() {
+    if (this._fontFace) {
+      // We know the font and can use canvas as a proxy
+      // to get the optimal width for the number of characters
+      if (typeof this._fontFace === "string") {
+        return this.measureText(this._fontFace);
+      } else {
+        const customFont = new FontFace(this._fontFace.name, `url(${this._fontFace.url})`);
+        customFont.load().then(
+          () => {
+            document.fonts.add(customFont);
+            return this.measureText(customFont.family)
+          },
+          (_err) => {});
+      }
+    }
+    
+    return this.getLineLengthFallback();
+  }
+
+  private measureText(fontFace: string | null) {
+    // Note: We don’t clear the canvas since we’re not filling it, just measuring
+    const ctx: CanvasRenderingContext2D | null = this._canvas.getContext("2d");
+    if (ctx && fontFace) {
+      // ch based on 0, ic based on water ideograph
+      let txt = this._isCJK ? "水".repeat(this._optimalChars) : "0".repeat(this._optimalChars);
+      ctx.font = `${this._baseFontSize}px ${fontFace}`;
+
+      if (this._sample && this._sample.length >= this._optimalChars) {
+        txt = this._sample.slice(0, this._optimalChars);
+      }
+
+      // Not supported in Safari
+      if (Object.hasOwn(ctx, "letterSpacing") && Object.hasOwn(ctx, "wordSpacing")) {
+        ctx.letterSpacing = this._letterSpacing.toString() + "px";
+        ctx.wordSpacing = this._wordSpacing.toString() + "px";
+        return ctx.measureText(txt).width;
+      } else {
+        // Instead of filling text with an offset for each character and space
+        // We simply add them to the measured width since we don’t need high accuracy
+        const letterSpace = this._letterSpacing * (this._optimalChars - 1);
+        const wordSpace = this._wordSpacing * LineLengths.approximateWordSpaces(this._optimalChars, this._sample);
+        return ctx.measureText(txt).width + letterSpace + wordSpace;
+      }
+    } else {
+      return this.getLineLengthFallback();
+    }
+  }
+}

package/src/helpers/sML.ts

@@ -8,6 +8,7 @@
  * Portions of this code come from the sML library
  * Current version: 1.0.36
  */
+/// <reference types="user-agent-data-types" />
 
 declare interface OSFlags {
     iOS: number[];
@@ -44,13 +45,19 @@ declare interface UAFlags {
     LINE: number[];
 }
 
+declare type iOSRequest = "mobile" | "desktop" | undefined;
+
+// Fallback when global 'navigator' is not available, such as in SSR environments.
+const userAgent = () => typeof navigator === "undefined" ? "" : (navigator.userAgent || "");
+const userAgentData = () => typeof navigator === "undefined" ? undefined : (navigator.userAgentData || undefined);
+
 class sMLFactory {
     OS: OSFlags;
     UA: UAFlags;
     Env!: string[];
 
     constructor() {
-        const NUAD = (navigator as any).userAgentData, NUA = navigator.userAgent;
+        const NUAD = userAgentData(), NUA = userAgent();
 
         const _sV = (V?: string | number) => (typeof V === "string" || typeof V === "number") && V ? String(V).replace(/_/g, ".").split(".").map(I => parseInt(I) || 0) : [];
         const _dV = (Pre="") => {
@@ -82,7 +89,7 @@ class sMLFactory {
         })({} as OSFlags));
 
         this.UA = ((UA: UAFlags) => { let _OK = false;
-            if(NUAD && Array.isArray(NUAD.brands)) { const BnV = NUAD.brands.reduce((BnV: string[], _: any) => { (BnV[_.brand] as any) = [_.version * 1]; return BnV; }, {});
+            if(NUAD && Array.isArray(NUAD.brands)) { const BnV = NUAD.brands.reduce((BnV: Record<string, number[]>, _: NavigatorUABrandVersion) => { BnV[_.brand] = [(_.version as any) * 1]; return BnV; }, {});
                     if(BnV["Google Chrome"])  _OK = true, UA.Blink = UA.Chromium = BnV["Chromium"] || [], UA.Chrome = BnV["Google Chrome"];
                 else if(BnV["Microsoft Edge"]) _OK = true, UA.Blink = UA.Chromium = BnV["Chromium"] || [], UA.Edge = BnV["Microsoft Edge"];
                 else if(BnV["Opera"])          _OK = true, UA.Blink = UA.Chromium = BnV["Chromium"] || [], UA.Opera = BnV["Opera"];
@@ -117,5 +124,20 @@ class sMLFactory {
     }
 }
 
+class sMLFactoryWithRequest extends sMLFactory {
+    get iOSRequest(): iOSRequest {
+        const NUAD = userAgentData(), NUA = userAgent();
+
+        if (this.OS.iOS && !this.OS.iPadOS) {
+            return "mobile";
+        } else if (this.OS.iPadOS) {
+            return (/\(iPad;/.test(NUA) || (NUAD && /^iPad(OS)?$/.test(NUAD.platform))) ? "mobile" : "desktop"
+        }
+
+        return undefined;
+    }
+}
+
 const sML = new sMLFactory();
-export { sML };
+const sMLWithRequest = new sMLFactoryWithRequest();
+export { sML, sMLWithRequest };

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from './Navigator';
 export * from './epub';
 export * from './audio';
-export * from './helpers';
+export * from './helpers';
+export * from './preferences';

package/src/preferences/Configurable.ts

@@ -0,0 +1,16 @@
+import { IPreferencesEditor } from "./PreferencesEditor";
+
+export interface ConfigurableSettings {
+  [key: string]: any;
+}
+
+export interface ConfigurablePreferences {
+  [key: string]: any;
+  merging(other: ConfigurablePreferences): ConfigurablePreferences;
+}
+
+export interface Configurable<ConfigurableSettings, ConfigurablePreferences> {
+  settings: ConfigurableSettings;
+  submitPreferences(preferences: ConfigurablePreferences): void;
+  preferencesEditor: IPreferencesEditor;
+}