@sakuzu/maplibre-gl-draw 1.0.0

package/dist/shared/types/model.js

@@ -0,0 +1,3 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+export {};

package/dist/shared/types/selection-box.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The corners of a selection box
+ */
+import type { Coordinate } from './model.js';
+/**
+ * The four corners and the center of a selection box, as geographic coordinates
+ *
+ * The box may be rotated with its feature (an Image, or a custom type that returns an
+ * oriented box), so the corners are named in the box's own orientation: `topLeft` is the
+ * top-left corner before the rotation.
+ */
+export interface BoundingBoxCoords {
+    /** The top-left corner */
+    topLeft: Coordinate;
+    /** The top-right corner */
+    topRight: Coordinate;
+    /** The bottom-right corner */
+    bottomRight: Coordinate;
+    /** The bottom-left corner */
+    bottomLeft: Coordinate;
+    /** The center */
+    center: Coordinate;
+}

package/dist/shared/types/selection-box.js

@@ -0,0 +1,3 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+export {};

package/dist/shared/types/style.d.ts

@@ -0,0 +1,68 @@
+/**
+ * The style types shared by the configuration (shared/config) and the renderers (view/)
+ */
+/**
+ * An RGBA color as four numbers from 0 to 1: `[red, green, blue, alpha]`
+ *
+ * The configuration of the renderers uses it; the style of a feature ({@link FeatureStyle})
+ * uses `#rrggbb` strings instead. `#FF2D55` is `[1.0, 0.176, 0.333, 1.0]`.
+ */
+export type Color = [number, number, number, number];
+/**
+ * The shape of a point marker or a handle
+ *
+ * The built-in renderers draw `'circle'`, `'square'`, `'triangle'` (equilateral, a vertex
+ * pointing up) and `'star'` (a five-pointed star, a tip pointing up). The triangle and the star
+ * are inscribed in the circle the `'circle'` shape of the same style draws (the size plus the
+ * stroke), and their stroke is drawn inside that outline. `'icon'` is a name for an extension
+ * renderer to draw (with `iconId` of {@link PointStyle}); the built-in renderers draw it as a
+ * circle.
+ *
+ * Hit testing does not look at the shape: a triangle or a star is hit like the circle that
+ * encloses it.
+ */
+export type PointShape = 'circle' | 'square' | 'triangle' | 'star' | 'icon';
+/**
+ * How a point marker or a handle is drawn: its shape, size, fill and outline
+ */
+export interface PointStyle {
+    /** The shape */
+    shape: PointShape;
+    /**
+     * The size in CSS pixels (the diameter of a circle, the side of a square; a triangle and a star
+     * are inscribed in the circle of this size plus the stroke)
+     */
+    size: number;
+    /** The fill color */
+    fillColor: Color;
+    /** The opacity of the fill, from 0 to 1 (multiplied into the alpha of `fillColor`) */
+    fillOpacity: number;
+    /** The color of the outline */
+    strokeColor: Color;
+    /** The width of the outline in CSS pixels (0 for no outline) */
+    strokeWidth: number;
+    /** The opacity of the outline, from 0 to 1 */
+    strokeOpacity: number;
+    /** The identifier of the icon, for the `'icon'` shape */
+    iconId?: string;
+}
+/** The dash pattern of a line: solid, dashed or dotted */
+export type LineStyle = 'solid' | 'dashed' | 'dotted';
+/**
+ * How a line or an outline is drawn: its width, color, opacity and dash pattern
+ */
+export interface StrokeStyle {
+    /** The width in CSS pixels */
+    width: number;
+    /** The color */
+    color: Color;
+    /** The opacity from 0 to 1 (multiplied into the alpha of `color`) */
+    opacity: number;
+    /** The dash pattern */
+    lineStyle: LineStyle;
+    /**
+     * A custom dash pattern in CSS pixels, `[dash, gap]`, used instead of the pattern of
+     * `lineStyle` when `lineStyle` is not `'solid'`
+     */
+    dashArray?: number[];
+}

package/dist/shared/types/style.js

@@ -0,0 +1,3 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+export {};

package/dist/shared/utils/color.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Color conversion utilities
+ *
+ * Functions that convert between HEX color strings and RGBA arrays.
+ */
+import type { Color } from '../types/style.js';
+/**
+ * Converts a HEX color string into an RGBA array
+ *
+ * @param hex - A color string in #RRGGBB or #RGB form
+ * @param opacity - Opacity (0-1)
+ * @returns An array in the form [r, g, b, a] (each value in 0-1)
+ */
+export declare function hexToColor(hex: string, opacity?: number): Color;
+/**
+ * Linearly interpolates two colors in the OKLab space
+ *
+ * Used for continuous color ramps (continuous in the style rules).
+ * Interpolation in the RGB space skews the brightness unevenly and, depending on the hue,
+ * muddies the middle, so the perceptually uniform L, a and b of OKLab are interpolated
+ * component by component.
+ * The interpolation position is clamped to 0-1.
+ *
+ * @param from - Color of the start point (#RRGGBB or #RGB)
+ * @param to - Color of the end point (#RRGGBB or #RGB)
+ * @param t - Interpolation position (0-1)
+ * @returns A color string in #RRGGBB form
+ */
+export declare function interpolateHexColor(from: string, to: string, t: number): string;
+/**
+ * Computes the relative luminance
+ *
+ * Based on the relative luminance formula of WCAG 2.0.
+ * https://www.w3.org/TR/WCAG20/#relativeluminancedef
+ *
+ * @param hex - A color string in #RRGGBB or #RGB form
+ * @returns Relative luminance (0-1)
+ */
+export declare function getLuminance(hex: string): number;
+/**
+ * Gets a contrasting color
+ *
+ * Returns a highly visible contrasting color based on the luminance of the given color.
+ * Returns black for a light color and white for a dark color.
+ *
+ * @param hex - A color string in #RRGGBB or #RGB form
+ * @returns The contrasting color (#000000 or #FFFFFF)
+ */
+export declare function getContrastColor(hex: string): string;

package/dist/shared/utils/color.js

@@ -0,0 +1,180 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+/**
+ * Extracts the RGB values from a HEX color string
+ *
+ * @param hex - A color string in #RRGGBB or #RGB form
+ * @returns { r, g, b }, each value in 0-255
+ */
+function parseHexToRgb(hex) {
+    const cleanHex = hex.replace('#', '');
+    let r;
+    let g;
+    let b;
+    if (cleanHex.length === 3) {
+        // #RGB form
+        r = Number.parseInt(cleanHex[0] + cleanHex[0], 16);
+        g = Number.parseInt(cleanHex[1] + cleanHex[1], 16);
+        b = Number.parseInt(cleanHex[2] + cleanHex[2], 16);
+    }
+    else {
+        // #RRGGBB form
+        r = Number.parseInt(cleanHex.substring(0, 2), 16);
+        g = Number.parseInt(cleanHex.substring(2, 4), 16);
+        b = Number.parseInt(cleanHex.substring(4, 6), 16);
+    }
+    return { r, g, b };
+}
+/**
+ * Converts a HEX color string into an RGBA array
+ *
+ * @param hex - A color string in #RRGGBB or #RGB form
+ * @param opacity - Opacity (0-1)
+ * @returns An array in the form [r, g, b, a] (each value in 0-1)
+ */
+export function hexToColor(hex, opacity = 1) {
+    const { r, g, b } = parseHexToRgb(hex);
+    return [r / 255, g / 255, b / 255, opacity];
+}
+/**
+ * Converts RGB values into a HEX color string
+ *
+ * @param r - Red (0-255)
+ * @param g - Green (0-255)
+ * @param b - Blue (0-255)
+ * @returns A color string in #RRGGBB form
+ */
+function rgbToHex(r, g, b) {
+    const toHex = (c) => Math.max(0, Math.min(255, Math.round(c)))
+        .toString(16)
+        .padStart(2, '0');
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+/**
+ * Converts sRGB (0-255) into linear sRGB (0-1)
+ *
+ * Uses the piecewise formula of IEC 61966-2-1 (threshold 0.04045).
+ *
+ * @param c - sRGB component (0-255)
+ * @returns Linear sRGB component (0-1)
+ */
+function srgbToLinear(c) {
+    const srgb = c / 255;
+    return srgb <= 0.04045 ? srgb / 12.92 : ((srgb + 0.055) / 1.055) ** 2.4;
+}
+/**
+ * Converts linear sRGB (0-1) into sRGB (0-255)
+ *
+ * Components that fall outside 0-1 in the inverse conversion are clamped here.
+ *
+ * @param c - Linear sRGB component
+ * @returns sRGB component (0-255)
+ */
+function linearToSrgb(c) {
+    const linear = Math.min(1, Math.max(0, c));
+    const srgb = linear <= 0.0031308 ? linear * 12.92 : 1.055 * linear ** (1 / 2.4) - 0.055;
+    return srgb * 255;
+}
+/**
+ * Converts a HEX color string into OKLab
+ *
+ * Uses the coefficients from Björn Ottosson's original article
+ * (https://bottosson.github.io/posts/oklab/). It maps in the order sRGB -> linear sRGB -> LMS
+ * -> cube root -> OKLab.
+ *
+ * @param hex - A color string in #RRGGBB or #RGB form
+ * @returns { L, a, b } OKLab coordinates
+ */
+function hexToOklab(hex) {
+    const rgb = parseHexToRgb(hex);
+    const r = srgbToLinear(rgb.r);
+    const g = srgbToLinear(rgb.g);
+    const b = srgbToLinear(rgb.b);
+    const l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
+    const m = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
+    const s = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
+    const l_ = Math.cbrt(l);
+    const m_ = Math.cbrt(m);
+    const s_ = Math.cbrt(s);
+    return {
+        L: 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_,
+        a: 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_,
+        b: 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_,
+    };
+}
+/**
+ * Converts OKLab into a HEX color string
+ *
+ * The inverse of hexToOklab. Out-of-gamut components are clamped at the linear sRGB stage.
+ *
+ * @param L - Lightness
+ * @param a - The green-to-red axis
+ * @param b - The blue-to-yellow axis
+ * @returns A color string in #rrggbb form
+ */
+function oklabToHex(L, a, b) {
+    const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+    const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+    const s_ = L - 0.0894841775 * a - 1.291485548 * b;
+    const l = l_ * l_ * l_;
+    const m = m_ * m_ * m_;
+    const s = s_ * s_ * s_;
+    return rgbToHex(linearToSrgb(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s), linearToSrgb(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s), linearToSrgb(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s));
+}
+/**
+ * Linearly interpolates two colors in the OKLab space
+ *
+ * Used for continuous color ramps (continuous in the style rules).
+ * Interpolation in the RGB space skews the brightness unevenly and, depending on the hue,
+ * muddies the middle, so the perceptually uniform L, a and b of OKLab are interpolated
+ * component by component.
+ * The interpolation position is clamped to 0-1.
+ *
+ * @param from - Color of the start point (#RRGGBB or #RGB)
+ * @param to - Color of the end point (#RRGGBB or #RGB)
+ * @param t - Interpolation position (0-1)
+ * @returns A color string in #RRGGBB form
+ */
+export function interpolateHexColor(from, to, t) {
+    const ratio = Math.min(1, Math.max(0, t));
+    const a = hexToOklab(from);
+    const b = hexToOklab(to);
+    return oklabToHex(a.L + (b.L - a.L) * ratio, a.a + (b.a - a.a) * ratio, a.b + (b.b - a.b) * ratio);
+}
+/**
+ * Computes the relative luminance
+ *
+ * Based on the relative luminance formula of WCAG 2.0.
+ * https://www.w3.org/TR/WCAG20/#relativeluminancedef
+ *
+ * @param hex - A color string in #RRGGBB or #RGB form
+ * @returns Relative luminance (0-1)
+ */
+export function getLuminance(hex) {
+    const { r, g, b } = parseHexToRgb(hex);
+    // Convert from sRGB into a linear value
+    const toLinear = (c) => {
+        const srgb = c / 255;
+        return srgb <= 0.03928 ? srgb / 12.92 : ((srgb + 0.055) / 1.055) ** 2.4;
+    };
+    const rLinear = toLinear(r);
+    const gLinear = toLinear(g);
+    const bLinear = toLinear(b);
+    // Computation of the relative luminance
+    return 0.2126 * rLinear + 0.7152 * gLinear + 0.0722 * bLinear;
+}
+/**
+ * Gets a contrasting color
+ *
+ * Returns a highly visible contrasting color based on the luminance of the given color.
+ * Returns black for a light color and white for a dark color.
+ *
+ * @param hex - A color string in #RRGGBB or #RGB form
+ * @returns The contrasting color (#000000 or #FFFFFF)
+ */
+export function getContrastColor(hex) {
+    const luminance = getLuminance(hex);
+    // A luminance above 0.5 means a light color -> a black outline
+    // A luminance at or below 0.5 means a dark color -> a white outline
+    return luminance > 0.5 ? '#000000' : '#FFFFFF';
+}

package/dist/shared/utils/coordinates.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Coordinate traversal utilities
+ *
+ * The coordinates of a Feature have a different array nesting depth per type
+ * (Point has 1 level, LineString has 2, Polygon / MultiLineString have 3, and
+ * MultiPolygon has 4). Moving, resizing, rotating and computing the bounding box apply the
+ * same processing to every coordinate at any depth, so the depth-independent recursive
+ * traversal is collected here.
+ */
+import type { Coordinate, FeatureCoordinates, FeatureType } from '../types/model.js';
+/**
+ * The Multi family of feature types
+ */
+export declare const MULTI_FEATURE_TYPES: readonly ["MultiPoint", "MultiLineString", "MultiPolygon"];
+/**
+ * Tests whether it is one of the Multi family of feature types
+ */
+export declare function isMultiFeatureType(type: FeatureType): boolean;
+/**
+ * Tests whether a value is a single coordinate `[lng, lat]`
+ */
+export declare function isCoordinate(value: unknown): value is Coordinate;
+/**
+ * Returns new coordinates with a transform function applied to every coordinate (the nesting
+ * depth is preserved)
+ *
+ * The coordinate mapping of moving, resizing and rotating shares this function.
+ * It can traverse the 4-level nesting of a Multi geometry as is.
+ */
+export declare function mapCoordinatesDeep<T extends FeatureCoordinates>(coords: T, transform: (coord: Coordinate) => Coordinate): T;
+/**
+ * Enumerates every coordinate in order
+ *
+ * Used in the union computation of the bounding box and of hit testing.
+ */
+export declare function forEachCoordinateDeep(coords: FeatureCoordinates, visit: (coord: Coordinate) => void): void;
+/**
+ * Gets every coordinate as a flat array
+ */
+export declare function flattenCoordinatesDeep(coords: FeatureCoordinates): Coordinate[];
+/**
+ * Whether the feature type supports vertex editing (vertex handles / midpoint handles)
+ *
+ * LineString / Polygon and the Multi types are supported. Point / Circle / Freehand /
+ * Image / custom features do not show vertex handles; they are edited with move, resize
+ * and rotate only.
+ *
+ * Handle rendering, hit testing, click-based vertex selection and the visibility control
+ * of the selection UI all share this predicate, which prevents per-path discrepancies
+ * such as "visible but not grabbable" or "grabbable but not selectable".
+ */
+export declare function supportsVertexEditing(type: FeatureType): boolean;

package/dist/shared/utils/coordinates.js

@@ -0,0 +1,75 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+/**
+ * The Multi family of feature types
+ */
+export const MULTI_FEATURE_TYPES = ['MultiPoint', 'MultiLineString', 'MultiPolygon'];
+const MULTI_FEATURE_TYPE_SET = new Set(MULTI_FEATURE_TYPES);
+/**
+ * Tests whether it is one of the Multi family of feature types
+ */
+export function isMultiFeatureType(type) {
+    return MULTI_FEATURE_TYPE_SET.has(type);
+}
+/**
+ * Tests whether a value is a single coordinate `[lng, lat]`
+ */
+export function isCoordinate(value) {
+    return Array.isArray(value) && value.length === 2 && typeof value[0] === 'number';
+}
+/**
+ * Returns new coordinates with a transform function applied to every coordinate (the nesting
+ * depth is preserved)
+ *
+ * The coordinate mapping of moving, resizing and rotating shares this function.
+ * It can traverse the 4-level nesting of a Multi geometry as is.
+ */
+export function mapCoordinatesDeep(coords, transform) {
+    if (isCoordinate(coords)) {
+        return transform(coords);
+    }
+    if (Array.isArray(coords)) {
+        return coords.map((child) => mapCoordinatesDeep(child, transform));
+    }
+    return coords;
+}
+/**
+ * Enumerates every coordinate in order
+ *
+ * Used in the union computation of the bounding box and of hit testing.
+ */
+export function forEachCoordinateDeep(coords, visit) {
+    if (isCoordinate(coords)) {
+        visit(coords);
+        return;
+    }
+    if (Array.isArray(coords)) {
+        for (const child of coords) {
+            forEachCoordinateDeep(child, visit);
+        }
+    }
+}
+/**
+ * Gets every coordinate as a flat array
+ */
+export function flattenCoordinatesDeep(coords) {
+    const result = [];
+    forEachCoordinateDeep(coords, (coord) => {
+        result.push(coord);
+    });
+    return result;
+}
+/**
+ * Whether the feature type supports vertex editing (vertex handles / midpoint handles)
+ *
+ * LineString / Polygon and the Multi types are supported. Point / Circle / Freehand /
+ * Image / custom features do not show vertex handles; they are edited with move, resize
+ * and rotate only.
+ *
+ * Handle rendering, hit testing, click-based vertex selection and the visibility control
+ * of the selection UI all share this predicate, which prevents per-path discrepancies
+ * such as "visible but not grabbable" or "grabbable but not selectable".
+ */
+export function supportsVertexEditing(type) {
+    return type === 'LineString' || type === 'Polygon' || isMultiFeatureType(type);
+}

package/dist/shared/utils/embedded-image.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Embedded image data URLs
+ *
+ * Image features reference their pixels through a data URL held in FileData. Such a URL is
+ * handed to `new Image().src`, so anything other than an embedded raster image (an http(s)
+ * URL, a blob URL, SVG and so on) would make every viewer of the data send a request to an
+ * outside host or run a decoder the library does not expect. The only accepted form is
+ * `data:image/(png|jpeg|webp|gif);base64,…`, and the pixel size is read from the header of the
+ * decoded bytes so that an oversized image can be scaled down before it reaches the GPU.
+ */
+/** The MIME types accepted for embedded images */
+export declare const EMBEDDED_IMAGE_MIME_TYPES: readonly ["image/png", "image/jpeg", "image/webp", "image/gif"];
+export type EmbeddedImageMimeType = (typeof EMBEDDED_IMAGE_MIME_TYPES)[number];
+/** The facts read from an embedded image */
+export interface EmbeddedImageInfo {
+    /** The MIME type found in the bytes (it matches the one in the data URL) */
+    mimeType: EmbeddedImageMimeType;
+    width: number;
+    height: number;
+}
+/**
+ * Whether the value has the form of an embedded raster image data URL
+ *
+ * Only the prefix and the Base64 alphabet are checked; the bytes are not decoded. Used at the
+ * rendering boundary, where the value has already been validated on import.
+ */
+export declare function isEmbeddedImageDataUrl(value: unknown): value is string;
+/**
+ * Reads the MIME type and the pixel size of an embedded image data URL
+ *
+ * @returns null when the value is not an accepted data URL, when the bytes are not an image
+ *   of the declared type, or when the size cannot be read
+ */
+export declare function readEmbeddedImage(value: unknown): EmbeddedImageInfo | null;

package/dist/shared/utils/embedded-image.js

@@ -0,0 +1,161 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+/**
+ * Embedded image data URLs
+ *
+ * Image features reference their pixels through a data URL held in FileData. Such a URL is
+ * handed to `new Image().src`, so anything other than an embedded raster image (an http(s)
+ * URL, a blob URL, SVG and so on) would make every viewer of the data send a request to an
+ * outside host or run a decoder the library does not expect. The only accepted form is
+ * `data:image/(png|jpeg|webp|gif);base64,…`, and the pixel size is read from the header of the
+ * decoded bytes so that an oversized image can be scaled down before it reaches the GPU.
+ */
+/** The MIME types accepted for embedded images */
+export const EMBEDDED_IMAGE_MIME_TYPES = [
+    'image/png',
+    'image/jpeg',
+    'image/webp',
+    'image/gif',
+];
+const EMBEDDED_IMAGE_PREFIX = /^data:(image\/(?:png|jpeg|webp|gif));base64,/;
+const BASE64_BODY = /^[A-Za-z0-9+/]*={0,2}$/;
+/**
+ * Whether the value has the form of an embedded raster image data URL
+ *
+ * Only the prefix and the Base64 alphabet are checked; the bytes are not decoded. Used at the
+ * rendering boundary, where the value has already been validated on import.
+ */
+export function isEmbeddedImageDataUrl(value) {
+    if (typeof value !== 'string')
+        return false;
+    const match = EMBEDDED_IMAGE_PREFIX.exec(value);
+    if (!match)
+        return false;
+    return BASE64_BODY.test(value.slice(match[0].length));
+}
+/**
+ * Reads the MIME type and the pixel size of an embedded image data URL
+ *
+ * @returns null when the value is not an accepted data URL, when the bytes are not an image
+ *   of the declared type, or when the size cannot be read
+ */
+export function readEmbeddedImage(value) {
+    if (!isEmbeddedImageDataUrl(value))
+        return null;
+    const match = EMBEDDED_IMAGE_PREFIX.exec(value);
+    if (!match)
+        return null;
+    const declared = match[1];
+    let bytes;
+    try {
+        bytes = atob(value.slice(match[0].length));
+    }
+    catch {
+        return null;
+    }
+    const info = readImageHeader(bytes);
+    if (!info || info.mimeType !== declared)
+        return null;
+    if (!(info.width > 0 && info.height > 0))
+        return null;
+    return info;
+}
+// ============================================================================
+// Header parsing (bytes are a binary string, one char per byte)
+// ============================================================================
+function u8(b, i) {
+    return b.charCodeAt(i) & 0xff;
+}
+function u16be(b, i) {
+    return (u8(b, i) << 8) | u8(b, i + 1);
+}
+function u16le(b, i) {
+    return u8(b, i) | (u8(b, i + 1) << 8);
+}
+function u24le(b, i) {
+    return u8(b, i) | (u8(b, i + 1) << 8) | (u8(b, i + 2) << 16);
+}
+function u32be(b, i) {
+    return ((u8(b, i) << 24) >>> 0) + (u8(b, i + 1) << 16) + (u8(b, i + 2) << 8) + u8(b, i + 3);
+}
+function readImageHeader(b) {
+    if (b.startsWith('\x89PNG\r\n\x1a\n'))
+        return readPng(b);
+    if (b.startsWith('GIF87a') || b.startsWith('GIF89a'))
+        return readGif(b);
+    if (b.startsWith('RIFF') && b.slice(8, 12) === 'WEBP')
+        return readWebp(b);
+    if (u8(b, 0) === 0xff && u8(b, 1) === 0xd8)
+        return readJpeg(b);
+    return null;
+}
+function readPng(b) {
+    // The first chunk is IHDR: width and height are big-endian uint32 at 16 and 20
+    if (b.length < 24 || b.slice(12, 16) !== 'IHDR')
+        return null;
+    return { mimeType: 'image/png', width: u32be(b, 16), height: u32be(b, 20) };
+}
+function readGif(b) {
+    if (b.length < 10)
+        return null;
+    return { mimeType: 'image/gif', width: u16le(b, 6), height: u16le(b, 8) };
+}
+function readWebp(b) {
+    const chunk = b.slice(12, 16);
+    if (chunk === 'VP8 ') {
+        if (b.length < 30)
+            return null;
+        return {
+            mimeType: 'image/webp',
+            width: u16le(b, 26) & 0x3fff,
+            height: u16le(b, 28) & 0x3fff,
+        };
+    }
+    if (chunk === 'VP8L') {
+        if (b.length < 25)
+            return null;
+        const b0 = u8(b, 21);
+        const b1 = u8(b, 22);
+        const b2 = u8(b, 23);
+        const b3 = u8(b, 24);
+        return {
+            mimeType: 'image/webp',
+            width: 1 + (((b1 & 0x3f) << 8) | b0),
+            height: 1 + (((b3 & 0x0f) << 10) | (b2 << 2) | ((b1 & 0xc0) >> 6)),
+        };
+    }
+    if (chunk === 'VP8X') {
+        if (b.length < 30)
+            return null;
+        return { mimeType: 'image/webp', width: 1 + u24le(b, 24), height: 1 + u24le(b, 27) };
+    }
+    return null;
+}
+function readJpeg(b) {
+    let i = 2;
+    while (i + 3 < b.length) {
+        if (u8(b, i) !== 0xff)
+            return null;
+        const marker = u8(b, i + 1);
+        if (marker === 0xff) {
+            // Fill byte
+            i += 1;
+            continue;
+        }
+        // Markers without a length field
+        if (marker === 0x01 || (marker >= 0xd0 && marker <= 0xd8)) {
+            i += 2;
+            continue;
+        }
+        // SOF0..SOF15 except DHT (C4), JPG (C8) and DAC (CC) carry the frame size
+        if (marker >= 0xc0 && marker <= 0xcf && marker !== 0xc4 && marker !== 0xc8 && marker !== 0xcc) {
+            if (i + 9 > b.length)
+                return null;
+            return { mimeType: 'image/jpeg', width: u16be(b, i + 7), height: u16be(b, i + 5) };
+        }
+        if (marker === 0xd9 || marker === 0xda)
+            return null;
+        i += 2 + u16be(b, i + 2);
+    }
+    return null;
+}