@sincpro/web-ui 1.6.0 → 1.7.0

package/dist/primitives/field/card.js

@@ -0,0 +1,173 @@
+/* ==================================================================== *
+ *  A PAYMENT CARD NUMBER — what it is, how it is written, whether it holds.
+ *
+ *  Pure: the control (`CardNumberInput`) draws with it, and an application
+ *  validates with the same functions before sending, so «the field accepted it»
+ *  and «the form accepts it» never disagree.
+ *
+ *  ── Digits in, digits out ───────────────────────────────────────────
+ *
+ *  The value is the DIGITS: «4242424242424242». The spaces are how it is read,
+ *  not what it is — the grouping depends on the brand (Amex is 4-6-5, the rest
+ *  4-4-4-4), so storing them would store a presentation.
+ *
+ *  ── The brand from the first digits (IIN) ───────────────────────────
+ *
+ *  The ranges are the published issuer prefixes, most specific first: Discover's
+ *  `622126–622925` lives inside UnionPay's `62`, so Discover is asked before.
+ *  The names are proper nouns and are not translated.
+ * ==================================================================== */
+const FOUR = [4, 4, 4, 4, 3];
+const RULES = [
+    {
+        brand: "amex",
+        name: "American Express",
+        prefix: /^3[47]/,
+        lengths: [15],
+        groups: [4, 6, 5],
+    },
+    {
+        brand: "diners",
+        name: "Diners Club",
+        prefix: /^3(?:0[0-5]|[689])/,
+        lengths: [14, 15, 16, 17, 18, 19],
+        groups: [4, 6, 4, 5],
+    },
+    { brand: "jcb", name: "JCB", prefix: /^35/, lengths: [16, 17, 18, 19], groups: FOUR },
+    { brand: "visa", name: "Visa", prefix: /^4/, lengths: [13, 16, 19], groups: FOUR },
+    {
+        brand: "mastercard",
+        name: "Mastercard",
+        prefix: /^(?:5[1-5]|2(?:2[2-9]|[3-6]\d|7[01]|720))/,
+        lengths: [16],
+        groups: FOUR,
+    },
+    {
+        brand: "discover",
+        name: "Discover",
+        prefix: /^(?:6011|65|64[4-9]|622(?:12[6-9]|1[3-9]\d|[2-8]\d\d|9[01]\d|92[0-5]))/,
+        lengths: [16, 17, 18, 19],
+        groups: FOUR,
+    },
+    {
+        brand: "unionpay",
+        name: "UnionPay",
+        prefix: /^62/,
+        lengths: [16, 17, 18, 19],
+        groups: FOUR,
+    },
+    {
+        brand: "maestro",
+        name: "Maestro",
+        prefix: /^(?:5[06-9]|6\d)/,
+        lengths: [12, 13, 14, 15, 16, 17, 18, 19],
+        groups: FOUR,
+    },
+];
+/** The longest a card number gets, of any brand. */
+export const CARD_MAX_DIGITS = 19;
+/** Only the digits of what was typed or pasted: «4242 4242-4242» → «424242424242». */
+export function cardDigits(text) {
+    return text.replace(/\D/g, "");
+}
+function ruleOf(digits, brand) {
+    if (brand !== undefined && brand !== null)
+        return RULES.find((one) => one.brand === brand);
+    return RULES.find((one) => one.prefix.test(digits));
+}
+/** The brand the first digits say, or `null` while they do not say one yet. */
+export function cardBrand(digits) {
+    return ruleOf(cardDigits(digits))?.brand ?? null;
+}
+/** How the brand is written: «American Express». */
+export function cardBrandName(brand) {
+    return RULES.find((one) => one.brand === brand)?.name ?? brand;
+}
+/** The most digits a number of this brand takes — where typing stops. */
+export function cardMaxDigits(digits, brand) {
+    const lengths = ruleOf(cardDigits(digits), brand)?.lengths;
+    return lengths === undefined ? CARD_MAX_DIGITS : Math.max(...lengths);
+}
+/** The digits in the brand's groups: «378282246310005» → «3782 822463 10005». */
+export function formatCardNumber(digits, brand) {
+    const clean = cardDigits(digits);
+    const groups = ruleOf(clean, brand)?.groups ?? FOUR;
+    const parts = [];
+    let at = 0;
+    for (const size of groups) {
+        if (at >= clean.length)
+            break;
+        parts.push(clean.slice(at, at + size));
+        at += size;
+    }
+    if (at < clean.length)
+        parts.push(clean.slice(at));
+    return parts.join(" ");
+}
+/** The Luhn check digit holds: a mistyped digit or two swapped neighbours fail it. */
+export function luhnValid(digits) {
+    const clean = cardDigits(digits);
+    if (clean.length === 0)
+        return false;
+    let sum = 0;
+    for (let i = 0; i < clean.length; i++) {
+        let digit = Number(clean[clean.length - 1 - i]);
+        if (i % 2 === 1) {
+            digit *= 2;
+            if (digit > 9)
+                digit -= 9;
+        }
+        sum += digit;
+    }
+    return sum % 10 === 0;
+}
+/** A whole number: a known brand, one of its lengths, and the check digit holds. */
+export function isValidCardNumber(digits) {
+    const clean = cardDigits(digits);
+    const rule = ruleOf(clean);
+    if (rule === undefined)
+        return false;
+    return rule.lengths.includes(clean.length) && luhnValid(clean);
+}
+/** Only the last four, the way a card is shown once it is stored: «•••• 4242». */
+export function maskCardNumber(digits) {
+    const clean = cardDigits(digits);
+    if (clean.length === 0)
+        return "";
+    return `•••• ${clean.slice(-4)}`;
+}
+/* ── The expiry «MM/AA» and the security code ─────────────────────────── */
+/** The digits of an expiry, a leading zero put in for a month that can only be one digit:
+ *  «4» is April, so «04»; «1» may still be October. At most four: MMAA. */
+export function expiryDigits(text) {
+    const clean = cardDigits(text);
+    const padded = /^[2-9]/.test(clean) ? `0${clean}` : clean;
+    return padded.slice(0, 4);
+}
+/** How the expiry reads: «1228» → «12/28». */
+export function formatExpiry(digits) {
+    const clean = cardDigits(digits).slice(0, 4);
+    return clean.length <= 2 ? clean : `${clean.slice(0, 2)}/${clean.slice(2)}`;
+}
+/** The month and the full year of a whole expiry, or `null` while it is not one. */
+export function expiryParts(digits) {
+    const clean = cardDigits(digits);
+    if (clean.length !== 4)
+        return null;
+    const month = Number(clean.slice(0, 2));
+    if (month < 1 || month > 12)
+        return null;
+    return { month, year: 2000 + Number(clean.slice(2)) };
+}
+/** A real month that has not ended yet: a card is good through the last day of its month. */
+export function isExpiryValid(digits, now = new Date()) {
+    const parts = expiryParts(digits);
+    if (parts === null)
+        return false;
+    const current = now.getFullYear() * 12 + now.getMonth();
+    return parts.year * 12 + (parts.month - 1) >= current;
+}
+/** How many digits the security code has: four on the front of an Amex, three elsewhere. */
+export function cardCodeLength(brand) {
+    return brand === "amex" ? 4 : 3;
+}

package/dist/primitives/field/clipboard.js

@@ -39,8 +39,9 @@ export function FieldCopyProvider({ value, children, }) {
 export function useFieldCopy() {
     return useContext(FieldCopyContext);
 }
-/** What skipping means: not seen, or not the value. */
-const SKIP = '[hidden], [aria-hidden="true"], [data-placeholder], .sr-only, button[aria-label], [data-copy-skip], select';
+/** What skipping means: not seen, or not the value. A password while it is hidden is not
+ *  SEEN — the dots are — so it is not copied; revealed, it is text like any other. */
+const SKIP = '[hidden], [aria-hidden="true"], [data-placeholder], .sr-only, button[aria-label], [data-copy-skip], select, input[type="password"]';
 /** The text a value area shows, inputs included, placeholders and named buttons left out. */
 export function shownText(root) {
     const parts = [];

package/dist/primitives/field/contact.d.ts

@@ -0,0 +1,17 @@
+/** Something that reads as an email: one `@`, a name before it and a domain with a dot after. */
+export declare function isEmail(text: string): boolean;
+/** The `mailto:` of an email, or `null` when it does not read as one. */
+export declare function emailHref(text: string): string | null;
+/** The `tel:` of a phone as people write it — «+591 7 123-4567» → `tel:+59171234567`. `null`
+ *  when there are no digits to call. */
+export declare function telHref(text: string): string | null;
+/** The `wa.me` link of a phone with its country code. `wa.me` takes digits only. */
+export declare function whatsappHref(text: string): string | null;
+/** The `href` of a website, `https://` added when it has no scheme; `null` for anything that
+ *  is not `http(s)` or does not parse — a «javascript:» never becomes a link. */
+export declare function urlHref(text: string): string | null;
+/** Something that reads as a website. */
+export declare function isUrl(text: string): boolean;
+/** How a website is read: without the scheme, the `www.` and the trailing slash —
+ *  «https://www.sincpro.com.bo/» reads «sincpro.com.bo». */
+export declare function urlLabel(text: string): string;

package/dist/primitives/field/contact.js

@@ -0,0 +1,65 @@
+/* ==================================================================== *
+ *  AN ADDRESS TO REACH SOMEONE — an email, a phone, a website.
+ *
+ *  Pure: the controls (`EmailInput`, `PhoneInput`, `UrlInput`) build their read
+ *  mode links with it, and a form validates with the same checks.
+ *
+ *  ── A link is built, never trusted ──────────────────────────────────
+ *
+ *  What people type becomes an `href`. A website written «javascript:…» must not
+ *  turn into a link that runs it, so a URL keeps only `http:` and `https:` —
+ *  anything else with a scheme is no link at all, and a bare «sincpro.com.bo»
+ *  gets `https://` in front, the way a browser's address bar reads it.
+ * ==================================================================== */
+/** Something that reads as an email: one `@`, a name before it and a domain with a dot after. */
+export function isEmail(text) {
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(text.trim());
+}
+/** The `mailto:` of an email, or `null` when it does not read as one. */
+export function emailHref(text) {
+    const clean = text.trim();
+    return isEmail(clean) ? `mailto:${clean}` : null;
+}
+/** The `tel:` of a phone as people write it — «+591 7 123-4567» → `tel:+59171234567`. `null`
+ *  when there are no digits to call. */
+export function telHref(text) {
+    const digits = text.replace(/[^\d+]/g, "").replace(/(?!^)\+/g, "");
+    return /\d/.test(digits) ? `tel:${digits}` : null;
+}
+/** The `wa.me` link of a phone with its country code. `wa.me` takes digits only. */
+export function whatsappHref(text) {
+    const digits = text.replace(/\D/g, "");
+    return digits.length === 0 ? null : `https://wa.me/${digits}`;
+}
+/** The `href` of a website, `https://` added when it has no scheme; `null` for anything that
+ *  is not `http(s)` or does not parse — a «javascript:» never becomes a link. */
+export function urlHref(text) {
+    const clean = text.trim();
+    if (clean === "" || /\s/.test(clean))
+        return null;
+    const withScheme = /^[a-z][a-z\d+.-]*:/i.test(clean) ? clean : `https://${clean}`;
+    try {
+        const url = new URL(withScheme);
+        if (url.protocol !== "http:" && url.protocol !== "https:")
+            return null;
+        if (!url.hostname.includes(".") && url.hostname !== "localhost")
+            return null;
+        return url.href;
+    }
+    catch {
+        return null;
+    }
+}
+/** Something that reads as a website. */
+export function isUrl(text) {
+    return urlHref(text) !== null;
+}
+/** How a website is read: without the scheme, the `www.` and the trailing slash —
+ *  «https://www.sincpro.com.bo/» reads «sincpro.com.bo». */
+export function urlLabel(text) {
+    return text
+        .trim()
+        .replace(/^https?:\/\//i, "")
+        .replace(/^www\./i, "")
+        .replace(/\/$/, "");
+}

package/dist/primitives/field/duration.d.ts

@@ -0,0 +1,5 @@
+/** Hours as «h:mm», rounded to the minute: 8.5 → «8:30», 0.25 → «0:15», -1.25 → «-1:15». */
+export declare function formatDuration(hours: number): string;
+/** What was typed, as hours; `""` for an empty box and `null` for something that is not a
+ *  duration (minutes past 59 included: «8:75» is a typo, not 9:15). */
+export declare function parseDuration(text: string): number | "" | null;

package/dist/primitives/field/duration.js

@@ -0,0 +1,48 @@
+/* ==================================================================== *
+ *  A DURATION in hours — «8:30» is 8.5, the `float_time` of an ERP.
+ *
+ *  Stored as a number of hours (what a timesheet sums), read as hours and
+ *  minutes (what a person says). Typed any of the ways people write it:
+ *
+ *      8:30   8,5   8.5   8h30   8h 30m   45m   2h   -1:15
+ *
+ *  Pure: the control writes and reads with it, and a report formats a total the
+ *  same way.
+ * ==================================================================== */
+/** Hours as «h:mm», rounded to the minute: 8.5 → «8:30», 0.25 → «0:15», -1.25 → «-1:15». */
+export function formatDuration(hours) {
+    const total = Math.round(Math.abs(hours) * 60);
+    const sign = hours < 0 && total > 0 ? "-" : "";
+    return `${sign}${Math.floor(total / 60)}:${String(total % 60).padStart(2, "0")}`;
+}
+/** What was typed, as hours; `""` for an empty box and `null` for something that is not a
+ *  duration (minutes past 59 included: «8:75» is a typo, not 9:15). */
+export function parseDuration(text) {
+    const clean = text.trim().toLowerCase().replace(/\s+/g, "");
+    if (clean === "")
+        return "";
+    const sign = clean.startsWith("-") ? -1 : 1;
+    const body = clean.replace(/^[-+]/, "");
+    const colon = /^(\d+):(\d{1,2})$/.exec(body);
+    if (colon !== null) {
+        const minutes = Number(colon[2]);
+        return minutes > 59 ? null : sign * (Number(colon[1]) + minutes / 60);
+    }
+    const decimal = /^\d+(?:[.,]\d+)?$/.exec(body);
+    if (decimal !== null)
+        return sign * Number(body.replace(",", "."));
+    const units = /^(?:(\d+)h)?(?:(\d+)m(?:in)?)?$/.exec(body);
+    if (units !== null && (units[1] !== undefined || units[2] !== undefined)) {
+        const minutes = Number(units[2] ?? 0);
+        if (units[1] !== undefined && minutes > 59)
+            return null;
+        return sign * (Number(units[1] ?? 0) + minutes / 60);
+    }
+    /* «8h30» — hours, then bare minutes. */
+    const short = /^(\d+)h(\d{1,2})$/.exec(body);
+    if (short !== null) {
+        const minutes = Number(short[2]);
+        return minutes > 59 ? null : sign * (Number(short[1]) + minutes / 60);
+    }
+    return null;
+}

package/dist/primitives/field/index.d.ts

@@ -1,7 +1,21 @@
+export { CARD_MAX_DIGITS, type CardBrand, cardBrand, cardBrandName, cardCodeLength, cardDigits, expiryDigits, expiryParts, formatCardNumber, formatExpiry, isExpiryValid, isValidCardNumber, luhnValid, maskCardNumber, } from "./card.js";
+export { CardCodeInput, CardExpiryInput, CardNumberInput, } from "./CardNumberInput.js";
 export { Checkbox, type CheckItem, CheckList } from "./Checks.js";
+export { CodeInput } from "./CodeInput.js";
+export { ColorInput } from "./ColorInput.js";
+export { emailHref, isEmail, isUrl, telHref, urlHref, urlLabel, whatsappHref, } from "./contact.js";
+export { EmailInput, PhoneInput, UrlInput, } from "./ContactInputs.js";
 export { FieldCopyProvider, shownText, useFieldCopy, } from "./clipboard.js";
 export { DropZone, type DropZoneProps } from "./DropZone.js";
+export { formatDuration, parseDuration } from "./duration.js";
+export { DurationInput } from "./DurationInput.js";
 export { controlClasses, DataField, Field, NumberInput, ReadValue, Select, type SelectOption, TextArea, TextInput, } from "./Field.js";
+export { type ImageChange, ImageInput } from "./ImageInput.js";
 export { type FieldLayout, FieldLayoutProvider, useSheetLayout, } from "./layout.js";
+export { PasswordInput } from "./PasswordInput.js";
+export { type MentionItem, RichTextInput, } from "./RichTextInput.js";
+export { formatPattern, isPatternComplete, patternLength, patternValue, } from "./pattern.js";
+export { PatternInput } from "./PatternInput.js";
+export { SignatureInput } from "./SignatureInput.js";
 export { Suggest, type SuggestProps } from "./Suggest.js";
 export { type FieldNote } from "./note.js";

package/dist/primitives/field/index.js

@@ -4,12 +4,32 @@
    What ARRANGES them —the sheet, the section, the footer— lives in `components/form`: a
    control does not know a form exists, and is used the same way inside a cell, a filter or
    a dialog. */
+/* A payment card: the control, and the same checks for the form to validate with. */
+export { CARD_MAX_DIGITS, cardBrand, cardBrandName, cardCodeLength, cardDigits, expiryDigits, expiryParts, formatCardNumber, formatExpiry, isExpiryValid, isValidCardNumber, luhnValid, maskCardNumber, } from "./card.js";
+export { CardCodeInput, CardExpiryInput, CardNumberInput, } from "./CardNumberInput.js";
+/* An address to reach someone: typed with its keyboard, read as a link. */
 export { Checkbox, CheckList } from "./Checks.js";
+export { CodeInput } from "./CodeInput.js";
+export { ColorInput } from "./ColorInput.js";
+export { emailHref, isEmail, isUrl, telHref, urlHref, urlLabel, whatsappHref, } from "./contact.js";
+export { EmailInput, PhoneInput, UrlInput, } from "./ContactInputs.js";
 /* The copy button every field carries by its label — on by default, off by field or by form. */
 export { FieldCopyProvider, shownText, useFieldCopy, } from "./clipboard.js";
 export { DropZone } from "./DropZone.js";
+/* A duration in hours, read «8:30». */
+export { formatDuration, parseDuration } from "./duration.js";
+export { DurationInput } from "./DurationInput.js";
 export { controlClasses, DataField, Field, NumberInput, ReadValue, Select, TextArea, TextInput, } from "./Field.js";
+/* An image the record holds (chosen, dropped, pasted, cropped) and a signature (drawn or typed). */
+export { ImageInput } from "./ImageInput.js";
 export { FieldLayoutProvider, useSheetLayout, } from "./layout.js";
+export { PasswordInput } from "./PasswordInput.js";
+/* Formatted text (an Odoo `html` field): Tiptap, loaded only on editing. */
+export { RichTextInput, } from "./RichTextInput.js";
+/* An identifier with a fixed shape: NIT, CI, account, IBAN. */
+export { formatPattern, isPatternComplete, patternLength, patternValue, } from "./pattern.js";
+export { PatternInput } from "./PatternInput.js";
+export { SignatureInput } from "./SignatureInput.js";
 export { Suggest } from "./Suggest.js";
 /* A note that belongs to one field: a card in the record's margin, or a flag by its label. */
 export {} from "./note.js";

package/dist/primitives/field/mask.d.ts

@@ -0,0 +1,33 @@
+import { type RefObject } from "react";
+export type MaskedChange = {
+    next: string;
+    caret: number;
+};
+/**
+ * What a keystroke did to a masked value.
+ *
+ *     raw      the input's text right after the keystroke
+ *     at       the caret in `raw`
+ *     current  the significant characters before it
+ *     drawn    how `current` was drawn
+ *     clean    the significant characters of any text
+ *     max      the most of them the value takes
+ */
+export declare function maskedChange({ raw, at, current, drawn, clean, max, }: {
+    raw: string;
+    at: number;
+    current: string;
+    drawn: string;
+    clean: (text: string) => string;
+    max: number;
+}): MaskedChange;
+/** Where, in the drawn text, the caret goes to sit after `count` significant characters. */
+export declare function caretAfter(drawn: string, count: number, significant: (char: string) => boolean): number;
+/**
+ * The input's ref, and `keep(count)` to call in `onChange`: once the new text is drawn, the
+ * caret goes back after `count` significant characters.
+ */
+export declare function useMaskCaret(drawn: string, significant: (char: string) => boolean): {
+    input: RefObject<HTMLInputElement | null>;
+    keep: (count: number) => void;
+};

package/dist/primitives/field/mask.js

@@ -0,0 +1,56 @@
+"use client";
+import { useLayoutEffect, useRef } from "react";
+/**
+ * What a keystroke did to a masked value.
+ *
+ *     raw      the input's text right after the keystroke
+ *     at       the caret in `raw`
+ *     current  the significant characters before it
+ *     drawn    how `current` was drawn
+ *     clean    the significant characters of any text
+ *     max      the most of them the value takes
+ */
+export function maskedChange({ raw, at, current, drawn, clean, max, }) {
+    let next = clean(raw);
+    let before = clean(raw.slice(0, at)).length;
+    if (next === current && raw.length < drawn.length && before > 0) {
+        next = next.slice(0, before - 1) + next.slice(before);
+        before -= 1;
+    }
+    next = next.slice(0, max);
+    return { next, caret: Math.min(before, next.length) };
+}
+/** Where, in the drawn text, the caret goes to sit after `count` significant characters. */
+export function caretAfter(drawn, count, significant) {
+    let seen = 0;
+    let at = 0;
+    while (at < drawn.length && seen < count) {
+        if (significant(drawn[at] ?? ""))
+            seen++;
+        at++;
+    }
+    return at;
+}
+/**
+ * The input's ref, and `keep(count)` to call in `onChange`: once the new text is drawn, the
+ * caret goes back after `count` significant characters.
+ */
+export function useMaskCaret(drawn, significant) {
+    const input = useRef(null);
+    const pending = useRef(null);
+    useLayoutEffect(() => {
+        const element = input.current;
+        const want = pending.current;
+        if (element === null || want === null)
+            return;
+        pending.current = null;
+        const at = caretAfter(drawn, want, significant);
+        element.setSelectionRange(at, at);
+    }, [drawn, significant]);
+    return {
+        input,
+        keep: (count) => {
+            pending.current = count;
+        },
+    };
+}

package/dist/primitives/field/media.d.ts

@@ -0,0 +1,99 @@
+/**
+ * The arithmetic behind the two media controls — the crop of `ImageInput` and the strokes of
+ * `SignatureInput` — kept apart from the canvas so it can be checked without a browser.
+ *
+ * Context: a crop that is off by half a pixel, or a pan that lets the frame slide past the
+ * edge of the photo, is invisible in a story and obvious on the avatar a hundred screens
+ * later. Here the rules are plain functions over sizes and points; the components only
+ * read the pointer and the keys, ask these where things go, and paint.
+ */
+export type Size = {
+    width: number;
+    height: number;
+};
+export type Rect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type Point = {
+    x: number;
+    y: number;
+};
+/** Where the frame sits on the image: how much it is zoomed in (1 = the image just covers
+ *  the frame) and the CENTRE of the frame, as a fraction of the image's width and height.
+ *  Fractions and not pixels so the same crop holds whatever size the image is drawn at. */
+export type Crop = {
+    zoom: number;
+    x: number;
+    y: number;
+};
+/** Past four times the photo is mostly blur: the limit is about what is worth keeping. */
+export declare const CROP_MAX_ZOOM = 4;
+export declare const CROP_CENTERED: Crop;
+/** The crop made valid: zoom within `[1, CROP_MAX_ZOOM]`, and the centre held far enough
+ *  from the edges that the frame never shows past the image. */
+export declare function clampCrop(image: Size, aspect: number, crop: Crop): Crop;
+/** The part of the image the frame shows, in image pixels — what `drawImage` reads from. */
+export declare function cropRegion(image: Size, aspect: number, crop: Crop): Rect;
+/**
+ * Moves the IMAGE under the frame by a fraction of the frame — the way a drag does: dragging
+ * right by a quarter of the frame slides the photo right by a quarter, so the frame now shows
+ * more of its left side. The arrow keys move it the same way, so the hand and the keyboard
+ * never disagree about which way is which.
+ */
+export declare function panCrop(image: Size, aspect: number, crop: Crop, dx: number, dy: number): Crop;
+/** Zooms by `factor` about the frame's centre (the point the person is looking at). */
+export declare function zoomCrop(image: Size, aspect: number, crop: Crop, factor: number): Crop;
+/** The size the cropped image is written at: the region's own pixels, never upscaled (a
+ *  bigger file of the same blur), and at most `maxSide` on its longer side. */
+export declare function outputSize(region: Size, maxSide: number): Size;
+/** Whether a file is an image the browser can draw. A dropped file is not filtered by
+ *  `accept`, so the type is checked here — and by its extension when the system did not
+ *  say its type, which happens for a file dragged from some file managers. */
+export declare function isImageFile(file: {
+    type: string;
+    name: string;
+}): boolean;
+/** The type a crop is written in: JPEG and WebP stay what they were (a photo as PNG is five
+ *  times heavier for nothing); everything else becomes PNG, which keeps transparency. */
+export declare function croppedType(type: string): "image/png" | "image/jpeg" | "image/webp";
+/** The file's name with the extension of the type it was written in: «logo.gif» cropped to
+ *  a PNG is «logo.png», so the server does not trust a name that lies about its content. */
+export declare function croppedName(name: string, type: string): string;
+/** One instruction of a stroke's path, in the canvas's terms. */
+export type PathStep = {
+    kind: "dot";
+    at: Point;
+} | {
+    kind: "move";
+    to: Point;
+} | {
+    kind: "quad";
+    control: Point;
+    to: Point;
+} | {
+    kind: "line";
+    to: Point;
+};
+/**
+ * The path of one stroke, smoothed: each sampled point becomes the CONTROL of a quadratic
+ * curve that runs between the midpoints around it.
+ *
+ * Context: joining the pointer's samples with straight lines draws a polygon — at the speed
+ * a signature is written the samples are far apart, and every corner shows. Curving through
+ * the midpoints passes near every sample without a corner at any of them, and costs nothing:
+ * no pressure, no velocity, no library. A single sample is a tap — a dot, the one over an i.
+ */
+export declare function strokeSteps(points: readonly Point[]): PathStep[];
+/** The font size a typed name is written at so it fits `maxWidth`: `size` when it fits, and
+ *  smaller in proportion when it does not — a long name is still one line, never cut. */
+export declare function fitFontSize(widthAtSize: number, size: number, maxWidth: number, min?: number): number;
+/** Keeps a pointer's moves on the element that started a drag, even when it leaves it — a
+ *  stroke that runs off the pad is still one stroke. A pointer the browser no longer tracks
+ *  (a synthetic one, or one already lifted) cannot be captured, and the drag works without. */
+export declare function capturePointer(event: {
+    currentTarget: Element;
+    pointerId: number;
+}): void;