@glimstone/core 4.1.1 → 4.2.2

package/README.md

@@ -15,9 +15,11 @@ npm install @glimstone/core
   onto Tailwind v4 utilities for an app that uses Tailwind.
 - `glyphs.json` and `glyphs.md` are the glyph assortment: which mark means
   what, where each comes from, and the sizing rules that make them one set.
-- The engines: `appearance` (shape, accent, rainbow, motion), `controls` (the
-  label engine and its width stages) and `setStoragePrefix`, which keeps an
-  app's own names for what it stores.
+- The engines: `appearance` (shape, accent, rainbow, motion), `theme` (OLED
+  and whether dark is showing), `contrast` (the inks that hold 4.5:1),
+  `browserAccent` (the browser as a source for the system accent), `controls`
+  (the label engine and its width stages) and `setStoragePrefix`, which keeps
+  an app's own names for what it stores.
 - What a component shows, as functions: `buttonView`, `badgeClassName`, the
   select's list model, the Info tile's version links and update check, the
   README button's classes, where a bubble goes, a dialog's keys and the toast
@@ -26,6 +28,10 @@ npm install @glimstone/core
   say how a field looks and how wide it is, `pressRowControl` does what a click
   on a row's label does, `treeRows` and `treeStep` hold a tree's rows and keys, and
   `tableCellClass` says what a table's cell wears.
+- The sign-in card's flow: `createSignInFlow` keeps what was typed and which
+  form shows while the app answers each step, `signInTextEn` holds the English
+  words, and `showRefusal` shakes the button of a refused try and selects the
+  refused field.
 - What windows and menus share: `windowFoot` adds the way out, `stackWindow`
   gives Escape and Tab to the window in front, and `menu.ts` holds the menu
   model with `tidyMenu`, `menuRowView`, `placeMenu`, `menuMove`,

package/dist/appearance.d.ts

@@ -1,3 +1,5 @@
+import { contrastOn } from './contrast.ts';
+export { contrastOn };
 /**
  * The corner shapes. Like the motion levels these strings are a wire format:
  * they go into `data-shape`, the stylesheet and storage, and what the user
@@ -108,15 +110,42 @@ export declare function stormTap(state: {
     taps: number;
 }, tapped: string, current: string): Motion | undefined;
 /**
- * Overrides the accent tokens, or clears the override so the theme's gold comes
- * back. The contrast colour is computed, so a light accent never gets white
- * text.
+ * The accent mode that takes its colour from the device: Material You on
+ * Android, the desktop's accent colour, or the browser's `AccentColor`. It is
+ * stored as this word, never as the colour, so a synced setting does not carry
+ * one device's wallpaper to the next.
+ */
+export declare const SYSTEM_ACCENT = "system";
+/**
+ * The colour an accent setting stands for: a hex as it is, the system mode as
+ * the colour the source reported, and undefined for the default, which is also
+ * what the system mode gives on a device without a source.
+ */
+export declare function resolveAccent(accent: string | undefined, system: string | undefined): string | undefined;
+/**
+ * Overrides the accent tokens with a hex or SYSTEM_ACCENT, or clears the
+ * override so the theme's gold comes back. The ink on the fill is computed, so
+ * a light accent never gets white text.
+ *
+ * `--accent-ink`, `--accent-glyph` and `--accent-hover` are derived in
+ * tokens.css with color-mix, so they also follow a later light or dark switch.
+ * Where that mix would fall short of 4.5:1 on a ramp, the ramp's ink is set
+ * here instead, as `--accent-ink-light` or `--accent-ink-dark`.
+ */
+export declare function applyAccent(accent: string | undefined): void;
+/**
+ * Feeds the colour the device reports, or undefined where it has none, and
+ * repaints when the accent is in the system mode. Call it again whenever the
+ * source changes; `watchBrowserAccent(setSystemAccent)` does that for the
+ * browser.
  *
- * `--accent-ink`, `--accent-glyph` and `--accent-hover` are not set here:
- * tokens.css derives them from --accent with color-mix, so they also follow a
- * later light or dark switch.
+ * The colour is remembered on this device alone, so the first frame after a
+ * reload is already in it.
  */
-export declare function applyAccent(hex: string | undefined): void;
+export declare function setSystemAccent(hex: string | undefined): void;
+/** The device's colour, or undefined where there is none, so the wand swatch stays hidden. */
+export declare function systemAccent(): string | undefined;
+export declare function subscribeSystemAccent(fn: () => void): () => void;
 /** The current snapshot, with a stable identity between changes. */
 export declare function rainbowState(): RainbowState;
 export declare function subscribeRainbow(fn: () => void): () => void;
@@ -169,8 +198,7 @@ export declare function rainbowFromSettings(s: {
     rainbowSeed?: number;
     rainbowPalette?: string[] | null;
 }): RainbowState;
-/** Black or white, whichever is readable on the given colour. */
-export declare function contrastOn(hex: string): string;
+/** `accent` is the setting, so the system mode is cached as SYSTEM_ACCENT. */
 export declare function cacheAppearance(shape: string, accent: string, rainbow?: RainbowState): void;
 /** Applied at boot, before the app renders anything. */
 export declare function applyCachedAppearance(): void;

package/dist/appearance.js

@@ -4,7 +4,11 @@
 // so every component picks it up through the tokens it already reads.
 //
 // It has no framework dependency; the React and Vue packages wrap it.
+import { accentInks, contrastOn, validHex as valid } from './contrast.js';
 import { storageKey } from './storage.js';
+import { applyOled, storedOled } from './theme.js';
+// Also reachable through the @glimstone/core/appearance subpath.
+export { contrastOn };
 /** The shapes a picker shows. */
 export const SHAPES = ['round', 'soft', 'square'];
 /**
@@ -140,26 +144,94 @@ export function stormTap(state, tapped, current) {
  * animations: `.glim-live`'s pulse keeps its stop at every level.
  */
 /**
- * Overrides the accent tokens, or clears the override so the theme's gold comes
- * back. The contrast colour is computed, so a light accent never gets white
- * text.
+ * The accent mode that takes its colour from the device: Material You on
+ * Android, the desktop's accent colour, or the browser's `AccentColor`. It is
+ * stored as this word, never as the colour, so a synced setting does not carry
+ * one device's wallpaper to the next.
+ */
+export const SYSTEM_ACCENT = 'system';
+/**
+ * The colour an accent setting stands for: a hex as it is, the system mode as
+ * the colour the source reported, and undefined for the default, which is also
+ * what the system mode gives on a device without a source.
+ */
+export function resolveAccent(accent, system) {
+    if (accent === SYSTEM_ACCENT)
+        return valid(system) ? system : undefined;
+    return valid(accent) ? accent : undefined;
+}
+let accentSetting;
+let systemColour;
+const systemListeners = new Set();
+/**
+ * Overrides the accent tokens with a hex or SYSTEM_ACCENT, or clears the
+ * override so the theme's gold comes back. The ink on the fill is computed, so
+ * a light accent never gets white text.
  *
- * `--accent-ink`, `--accent-glyph` and `--accent-hover` are not set here:
- * tokens.css derives them from --accent with color-mix, so they also follow a
- * later light or dark switch.
+ * `--accent-ink`, `--accent-glyph` and `--accent-hover` are derived in
+ * tokens.css with color-mix, so they also follow a later light or dark switch.
+ * Where that mix would fall short of 4.5:1 on a ramp, the ramp's ink is set
+ * here instead, as `--accent-ink-light` or `--accent-ink-dark`.
  */
-export function applyAccent(hex) {
+export function applyAccent(accent) {
+    accentSetting = accent;
+    paintAccent(resolveAccent(accent, systemColour));
+}
+function paintAccent(hex) {
     const root = document.documentElement.style;
+    const inks = valid(hex) ? accentInks(hex) : { light: undefined, dark: undefined };
+    for (const [ramp, ink] of Object.entries(inks)) {
+        if (ink)
+            root.setProperty(`--accent-ink-${ramp}`, ink);
+        else
+            root.removeProperty(`--accent-ink-${ramp}`);
+    }
     if (!valid(hex)) {
         root.removeProperty('--accent');
         root.removeProperty('--accent-contrast');
         root.removeProperty('--accent-soft');
         return;
     }
-    const { r, g, b } = parse(hex);
+    const n = parseInt(hex.slice(1), 16);
     root.setProperty('--accent', hex);
     root.setProperty('--accent-contrast', contrastOn(hex));
-    root.setProperty('--accent-soft', `rgba(${r}, ${g}, ${b}, 0.14)`);
+    root.setProperty('--accent-soft', `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, 0.14)`);
+}
+/**
+ * Feeds the colour the device reports, or undefined where it has none, and
+ * repaints when the accent is in the system mode. Call it again whenever the
+ * source changes; `watchBrowserAccent(setSystemAccent)` does that for the
+ * browser.
+ *
+ * The colour is remembered on this device alone, so the first frame after a
+ * reload is already in it.
+ */
+export function setSystemAccent(hex) {
+    const next = valid(hex) ? hex : undefined;
+    if (next === systemColour)
+        return;
+    systemColour = next;
+    try {
+        if (next)
+            localStorage.setItem(storageKey('system-accent'), next);
+        else
+            localStorage.removeItem(storageKey('system-accent'));
+    }
+    catch {
+        // Without storage the default shows until the source answers.
+    }
+    if (accentSetting === SYSTEM_ACCENT)
+        paintAccent(next);
+    for (const fn of systemListeners)
+        fn();
+}
+/** The device's colour, or undefined where there is none, so the wand swatch stays hidden. */
+export function systemAccent() {
+    return systemColour;
+}
+export function subscribeSystemAccent(fn) {
+    systemListeners.add(fn);
+    return () => systemListeners.delete(fn);
 }
 // The rainbow state belongs to the document, not a component: the sidebar and a
 // list far away in the tree must agree on which colour position three is, so
@@ -285,32 +357,7 @@ function usablePalette(p) {
         return RAINBOW;
     return p;
 }
-/** Black or white, whichever is readable on the given colour. */
-export function contrastOn(hex) {
-    if (!valid(hex))
-        return '#FFFFFF';
-    const { r, g, b } = parse(hex);
-    // Carbon's own ink: on a yellow accent a brown-tinted black reads as a smudge.
-    return luminance(r, g, b) > 0.55 ? '#161616' : '#FFFFFF';
-}
-function valid(hex) {
-    return !!hex && /^#[0-9a-fA-F]{6}$/.test(hex);
-}
-function parse(hex) {
-    const n = parseInt(hex.slice(1), 16);
-    return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
-}
-/**
- * Relative luminance, used to pick black or white on top. The channels are
- * linearised first because raw sRGB overstates blue and understates green.
- */
-function luminance(r, g, b) {
-    const lin = (c) => {
-        const v = c / 255;
-        return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
-    };
-    return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
-}
+/** `accent` is the setting, so the system mode is cached as SYSTEM_ACCENT. */
 export function cacheAppearance(shape, accent, rainbow) {
     try {
         // The conditional spread omits the key under exactOptionalPropertyTypes
@@ -324,7 +371,11 @@ export function cacheAppearance(shape, accent, rainbow) {
 }
 /** Applied at boot, before the app renders anything. */
 export function applyCachedAppearance() {
+    applyOled(storedOled());
     try {
+        const system = localStorage.getItem(storageKey('system-accent')) ?? undefined;
+        if (valid(system))
+            systemColour = system;
         const raw = localStorage.getItem(storageKey('appearance'));
         if (!raw) {
             applyShape(DEFAULT_SHAPE);

package/dist/browserAccent.d.ts

@@ -0,0 +1,12 @@
+/** Whether `AccentColor` carries the system's colour in this browser. */
+export declare function browserAccentWorks(): boolean;
+/** The system's accent as the browser reports it, or undefined where it is no source. */
+export declare function browserAccent(): string | undefined;
+/** A computed `rgb()` or `rgba()` colour as `#RRGGBB`, or undefined for anything else. */
+export declare function cssColourToHex(colour: string): string | undefined;
+/**
+ * Calls `onChange` with the browser's accent now and whenever it has changed
+ * on the window's return, so `watchBrowserAccent(setSystemAccent)` keeps the
+ * system mode current. Returns the function that stops watching.
+ */
+export declare function watchBrowserAccent(onChange: (hex: string | undefined) => void): () => void;

package/dist/browserAccent.js

@@ -0,0 +1,66 @@
+// The browser as a source for the system accent: the CSS system colour
+// `AccentColor`, read off a probe element. An app inside a native shell feeds
+// setSystemAccent from the shell instead (Material You on Android, the desktop
+// accent in a desktop shell); this is for the plain web.
+//
+// Limits, all of them the browser's:
+//   · Firefox and Safari resolve AccentColor to the system's colour. Chromium
+//     resolves it to a fixed colour of its own, whatever the system uses, so
+//     Chrome, Edge, Opera and every other Chromium browser count as no source.
+//   · Where the system has no accent of its own, as on Linux without a theme
+//     that names one or on iOS, the browser answers with its default.
+//   · Firefox with resistFingerprinting answers with a fixed colour too, and
+//     nothing on the page can tell.
+//   · No event fires when the system's accent changes, so the colour is read
+//     again when the window comes back to the front, which is when somebody
+//     returns from the system's settings.
+/** Whether `AccentColor` carries the system's colour in this browser. */
+export function browserAccentWorks() {
+    if (typeof CSS === 'undefined' || !CSS.supports('color', 'AccentColor'))
+        return false;
+    // No word boundary, so a headless Chrome's `HeadlessChrome/` counts as well.
+    return !/Chrom(e|ium)\//.test(navigator.userAgent);
+}
+/** The system's accent as the browser reports it, or undefined where it is no source. */
+export function browserAccent() {
+    if (!browserAccentWorks())
+        return undefined;
+    const probe = document.createElement('span');
+    probe.style.color = 'AccentColor';
+    probe.style.display = 'none';
+    document.documentElement.append(probe);
+    const colour = getComputedStyle(probe).color;
+    probe.remove();
+    return cssColourToHex(colour);
+}
+/** A computed `rgb()` or `rgba()` colour as `#RRGGBB`, or undefined for anything else. */
+export function cssColourToHex(colour) {
+    const m = colour.match(/^rgba?\(\s*(\d+)[\s,]+(\d+)[\s,]+(\d+)/);
+    if (!m)
+        return undefined;
+    return '#' + m.slice(1, 4).map((v) => Number(v).toString(16).padStart(2, '0')).join('').toUpperCase();
+}
+/**
+ * Calls `onChange` with the browser's accent now and whenever it has changed
+ * on the window's return, so `watchBrowserAccent(setSystemAccent)` keeps the
+ * system mode current. Returns the function that stops watching.
+ */
+export function watchBrowserAccent(onChange) {
+    let last = browserAccent();
+    onChange(last);
+    const check = () => {
+        if (document.visibilityState === 'hidden')
+            return;
+        const next = browserAccent();
+        if (next === last)
+            return;
+        last = next;
+        onChange(next);
+    };
+    addEventListener('focus', check);
+    document.addEventListener('visibilitychange', check);
+    return () => {
+        removeEventListener('focus', check);
+        document.removeEventListener('visibilitychange', check);
+    };
+}

package/dist/contrast.d.ts

@@ -0,0 +1,26 @@
+/** The ratio body text needs, and the floor of every ink computed here. */
+export declare const MIN_TEXT_CONTRAST = 4.5;
+export declare function validHex(hex: string | undefined): hex is string;
+/** The WCAG contrast ratio of two `#rrggbb` colours, from 1 to 21. */
+export declare function contrastRatio(a: string, b: string): number;
+/**
+ * The ink for text or a glyph on a fill of the given colour: white or Carbon's
+ * near-black, whichever reads better. On the mid-tones where neither reaches
+ * 4.5:1, the near-black goes on toward black until it does, which it always
+ * can.
+ */
+export declare function contrastOn(hex: string): string;
+/**
+ * The accent used as ink on each ramp, where the theme's own derivation in
+ * tokens.css falls short of 4.5:1 on its card. Undefined for a ramp means the
+ * stylesheet's mix holds and nothing needs setting, which is the case for
+ * every preset.
+ *
+ * The light ink starts from the stylesheet's mix toward black and goes on
+ * toward black; the dark ink starts from the accent itself and goes toward
+ * white.
+ */
+export declare function accentInks(hex: string): {
+    light: string | undefined;
+    dark: string | undefined;
+};

package/dist/contrast.js

@@ -0,0 +1,107 @@
+// The contrast arithmetic of WCAG 2, and the inks the colour engine computes
+// with it. Every ink it hands out reaches 4.5:1, the minimum for body text,
+// whatever colour somebody picked or the system supplied.
+/** The ratio body text needs, and the floor of every ink computed here. */
+export const MIN_TEXT_CONTRAST = 4.5;
+// Carbon's own ink: on a yellow accent a brown-tinted black reads as a smudge.
+const DARK_INK = '#161616';
+const WHITE = '#FFFFFF';
+const BLACK = '#000000';
+// The card surface of each ramp in tokens.css, where accent text mostly sits.
+// The presets were measured against these, and OLED's darker card only adds
+// to the dark figure, so the dark ink holds there as well.
+const LIGHT_CARD = '#FFFFFF';
+const DARK_CARD = '#262626';
+// --ink-mix of the light ramp in tokens.css.
+const LIGHT_INK_MIX = 0.55;
+export function validHex(hex) {
+    return !!hex && /^#[0-9a-fA-F]{6}$/.test(hex);
+}
+function rgb(hex) {
+    const n = parseInt(hex.slice(1), 16);
+    return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+function hexOf(c) {
+    return '#' + c.map((v) => Math.round(v).toString(16).padStart(2, '0')).join('').toUpperCase();
+}
+/** `amount` of `to` in `from`, the way color-mix() in srgb mixes. */
+function mix(from, to, amount) {
+    return [0, 1, 2].map((i) => from[i] + (to[i] - from[i]) * amount);
+}
+/**
+ * Relative luminance. The channels are linearised first because raw sRGB
+ * overstates blue and understates green.
+ */
+function luminance(c) {
+    const lin = (v) => {
+        const s = v / 255;
+        return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+    };
+    return 0.2126 * lin(c[0]) + 0.7152 * lin(c[1]) + 0.0722 * lin(c[2]);
+}
+function ratio(a, b) {
+    const x = luminance(a);
+    const y = luminance(b);
+    return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05);
+}
+/** The WCAG contrast ratio of two `#rrggbb` colours, from 1 to 21. */
+export function contrastRatio(a, b) {
+    return ratio(rgb(a), rgb(b));
+}
+/**
+ * `from` moved toward `to` just far enough to reach the minimum against
+ * `ground`, as a hex colour. The ratio only grows on the way, as long as `to`
+ * lies on the far side of `from` from the ground, so halving finds the least
+ * amount that does it.
+ */
+function pushed(from, to, ground) {
+    const reaches = (t) => ratio(mix(from, to, t).map(Math.round), ground) >= MIN_TEXT_CONTRAST;
+    let lo = 0;
+    let hi = 1;
+    for (let i = 0; i < 16; i++) {
+        const mid = (lo + hi) / 2;
+        if (reaches(mid))
+            hi = mid;
+        else
+            lo = mid;
+    }
+    return hexOf(mix(from, to, hi));
+}
+/**
+ * The ink for text or a glyph on a fill of the given colour: white or Carbon's
+ * near-black, whichever reads better. On the mid-tones where neither reaches
+ * 4.5:1, the near-black goes on toward black until it does, which it always
+ * can.
+ */
+export function contrastOn(hex) {
+    if (!validHex(hex))
+        return WHITE;
+    const fill = rgb(hex);
+    const onWhite = ratio(fill, rgb(WHITE));
+    const onDark = ratio(fill, rgb(DARK_INK));
+    if (onWhite > onDark && onWhite >= MIN_TEXT_CONTRAST)
+        return WHITE;
+    if (onDark >= MIN_TEXT_CONTRAST)
+        return DARK_INK;
+    return pushed(rgb(DARK_INK), rgb(BLACK), fill);
+}
+/**
+ * The accent used as ink on each ramp, where the theme's own derivation in
+ * tokens.css falls short of 4.5:1 on its card. Undefined for a ramp means the
+ * stylesheet's mix holds and nothing needs setting, which is the case for
+ * every preset.
+ *
+ * The light ink starts from the stylesheet's mix toward black and goes on
+ * toward black; the dark ink starts from the accent itself and goes toward
+ * white.
+ */
+export function accentInks(hex) {
+    if (!validHex(hex))
+        return { light: undefined, dark: undefined };
+    const accent = rgb(hex);
+    const light = mix(accent, rgb(BLACK), 1 - LIGHT_INK_MIX);
+    return {
+        light: ratio(light, rgb(LIGHT_CARD)) >= MIN_TEXT_CONTRAST ? undefined : pushed(light, rgb(BLACK), rgb(LIGHT_CARD)),
+        dark: ratio(accent, rgb(DARK_CARD)) >= MIN_TEXT_CONTRAST ? undefined : pushed(accent, rgb(WHITE), rgb(DARK_CARD)),
+    };
+}

package/dist/disco.js

@@ -10,7 +10,8 @@
 // hidden mode somebody found on purpose is not a default anybody inherited.
 // The glide itself follows the motion engine: with reduced motion, or at the
 // "off" level, disco steps one colour at a time instead.
-import { applyRainbow, contrastOn, rainbowState, RAINBOW } from './appearance.js';
+import { applyRainbow, rainbowState, RAINBOW } from './appearance.js';
+import { contrastOn } from './contrast.js';
 import { buildLoop, colourAt } from './discoLoop.js';
 /** The walk covers one palette colour's worth of loop every 2.4 seconds, so a
  *  full turn of eight colours takes 19.2 seconds. Stepping, it moves one

package/dist/index.d.ts

@@ -1,11 +1,13 @@
 export * from "./appearance.ts";
 export * from "./appMarks.ts";
 export * from "./badge.ts";
+export * from "./browserAccent.ts";
 export * from "./bubblePosition.ts";
 export * from "./button.ts";
 export * from "./clipboard.ts";
 export * from "./colorNames.ts";
 export * from "./colorPicker.ts";
+export * from "./contrast.ts";
 export * from "./controls.ts";
 export * from "./dialog.ts";
 export * from "./disco.ts";
@@ -30,9 +32,11 @@ export * from "./selector.ts";
 export * from "./selectModel.ts";
 export * from "./selectScroll.ts";
 export * from "./sidebarRow.ts";
+export * from "./signIn.ts";
 export * from "./storage.ts";
 export * from "./tipBubble.ts";
 export * from "./table.ts";
+export * from "./theme.ts";
 export * from "./toastEngine.ts";
 export * from "./tooltip.ts";
 export * from "./tree.ts";

package/dist/index.js

@@ -1,11 +1,13 @@
 export * from "./appearance.js";
 export * from "./appMarks.js";
 export * from "./badge.js";
+export * from "./browserAccent.js";
 export * from "./bubblePosition.js";
 export * from "./button.js";
 export * from "./clipboard.js";
 export * from "./colorNames.js";
 export * from "./colorPicker.js";
+export * from "./contrast.js";
 export * from "./controls.js";
 export * from "./dialog.js";
 export * from "./disco.js";
@@ -30,9 +32,11 @@ export * from "./selector.js";
 export * from "./selectModel.js";
 export * from "./selectScroll.js";
 export * from "./sidebarRow.js";
+export * from "./signIn.js";
 export * from "./storage.js";
 export * from "./tipBubble.js";
 export * from "./table.js";
+export * from "./theme.js";
 export * from "./toastEngine.js";
 export * from "./tooltip.js";
 export * from "./tree.js";

package/dist/signIn.d.ts

@@ -0,0 +1,136 @@
+/** The card's words, translated by the app. */
+export interface SignInText {
+    password: string;
+    signIn: string;
+    /** The bubble on Sign in while it works. */
+    signingIn: string;
+    passkey: string;
+    /** "Forgot password?", with the question mark. */
+    forgot: string;
+    /** The label of the second step's code field. */
+    code: string;
+    /** The line under the code field, such as where the code comes from. */
+    codeHint: string;
+    /** Said when the app refuses a code without a reason of its own. */
+    codeInvalid: string;
+    back: string;
+    /** The label of the reset form's code field. */
+    resetCode: string;
+    /** The (i) beside it: where the log is, how long the code lasts, what a reset removes. */
+    resetCodeTip: string;
+    newPassword: string;
+    confirmPassword: string;
+    setPassword: string;
+    /** The bubble on Set password while it works. */
+    saving: string;
+    mismatch: string;
+    /** Says how many characters a new password needs, with the number filled in. */
+    tooShort: string;
+    /** Said when the app refuses the code from the log. */
+    resetRejected: string;
+    /** Said when a callback throws or answers without a reason. */
+    failed: string;
+    /** The reveal eye's name while the secret is hidden, and once it shows. */
+    show: string;
+    hide: string;
+}
+/** English words, for an app in English and for the demos. */
+export declare const signInTextEn: SignInText;
+/**
+ * What the app answers to a sign-in or a passkey. `ok` means the card's part is
+ * done: the app signs in or shows a step of its own. `needCode` asks for the
+ * second step, and `error` is said above Sign in.
+ */
+export interface SignInAnswer {
+    ok?: boolean;
+    needCode?: boolean;
+    error?: string;
+}
+/** What the app answers to asking for a reset code or to setting the password. `rejected` means the code from the log was refused. */
+export interface ResetAnswer {
+    ok?: boolean;
+    rejected?: boolean;
+    error?: string;
+}
+export interface SignInHandlers {
+    /** `code` is set once the app asked for one, and `passkey` when a passkey started the sign-in. */
+    onSignIn: (input: {
+        password: string;
+        code?: string;
+        passkey: boolean;
+    }) => Promise<SignInAnswer>;
+    /** An empty answer leaves the card as it was, for a prompt the person closed. */
+    onPasskey?: () => Promise<SignInAnswer>;
+    /** Writes a code to the log. The reset form shows only once this answers ok. */
+    onAskCode?: () => Promise<ResetAnswer>;
+    onSetPassword?: (input: {
+        code: string;
+        password: string;
+    }) => Promise<ResetAnswer>;
+}
+export type SignInField = "password" | "code" | "resetCode" | "newPassword" | "confirm";
+/** The card's buttons, by their `data-signin` hook. */
+export type SignInButton = "submit" | "set-password" | "passkey" | "forgot";
+/**
+ * The last refused step: the button that shakes and the field that takes the
+ * focus with its content selected. `count` grows with every refusal, so the
+ * same refusal twice still shakes twice.
+ */
+export interface SignInRefusal {
+    button: SignInButton;
+    field: SignInField | null;
+    count: number;
+}
+export interface SignInState {
+    view: "signIn" | "reset";
+    password: string;
+    code: string;
+    needCode: boolean;
+    /** A passkey started this sign-in, so the code goes without the password. */
+    viaPasskey: boolean;
+    resetCode: string;
+    newPassword: string;
+    confirm: string;
+    error: string | null;
+    refusal: SignInRefusal | null;
+    busy: "signIn" | "passkey" | "askCode" | "setPassword" | null;
+}
+export interface SignInOptions extends SignInHandlers {
+    text: SignInText;
+    /** The shortest new password the reset form takes. */
+    minPassword: number;
+}
+export interface SignInFlow {
+    state(): SignInState;
+    subscribe(listener: () => void): () => void;
+    set(field: SignInField, value: string): void;
+    submit(): Promise<void>;
+    passkey(): Promise<void>;
+    forgot(): Promise<void>;
+    back(): void;
+}
+/**
+ * The flow behind one card. `options` is read at every step, so a framework
+ * hands in its current props rather than the ones the card was made with.
+ */
+export declare function createSignInFlow(options: () => SignInOptions): SignInFlow;
+/** Sign in waits for the password, and in the second step for the code. */
+export declare function signInBlocked(s: SignInState): boolean;
+/** Set password waits for the code from the log and a new password. */
+export declare function resetBlocked(s: SignInState): boolean;
+/**
+ * Which form shows, as a key that changes whenever the focus should move to
+ * the first empty field of the new form.
+ */
+export declare function signInStage(s: SignInState): string;
+/**
+ * Puts the focus in the first empty field inside `root`, or in its first field
+ * when all hold something, such as a name the app filled in.
+ */
+export declare function focusFirstField(root: HTMLElement | null): void;
+/**
+ * Answers a refusal on screen: the button shakes once (`glim-shake`, which the
+ * motion engine stills) and the field takes the focus with its content
+ * selected, so the next try starts by typing. Returns the shake's cleanup.
+ */
+export declare function showRefusal(root: HTMLElement | null, refusal: SignInRefusal): () => void;