@glimstone/core 4.1.1 → 4.2.2

package/dist/signIn.js

@@ -0,0 +1,225 @@
+// The sign-in card's flow without a framework (docs/design-language.md, "The
+// sign-in card"). The app answers each step through a callback, the flow keeps
+// what was typed and which form shows, and the React and Vue cards draw it.
+import { shake } from "./selectModel.js";
+/** English words, for an app in English and for the demos. */
+export const signInTextEn = {
+    password: "Password",
+    signIn: "Sign in",
+    signingIn: "Signing in…",
+    passkey: "Sign in with a passkey",
+    forgot: "Forgot password?",
+    code: "Code",
+    codeHint: "Six digits from your authenticator app, or one of your recovery codes.",
+    codeInvalid: "That code is not valid.",
+    back: "Back",
+    resetCode: "Code from the container log",
+    resetCodeTip: "The app has written a code to its container log. On Unraid: Docker tab, the app's icon, Logs. A code is valid for 10 minutes.",
+    newPassword: "New password",
+    confirmPassword: "Confirm password",
+    setPassword: "Set password",
+    saving: "Saving…",
+    mismatch: "The two passwords are not the same.",
+    tooShort: "The new password needs at least 12 characters.",
+    resetRejected: "That code is wrong or has expired. If it expired, the log now shows a new one.",
+    failed: "That did not work. Please try again.",
+    show: "Show",
+    hide: "Hide",
+};
+const START = {
+    view: "signIn",
+    password: "",
+    code: "",
+    needCode: false,
+    viaPasskey: false,
+    resetCode: "",
+    newPassword: "",
+    confirm: "",
+    error: null,
+    refusal: null,
+    busy: null,
+};
+const BUTTON_OF = {
+    signIn: "submit",
+    setPassword: "set-password",
+    passkey: "passkey",
+    askCode: "forgot",
+};
+/**
+ * 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 function createSignInFlow(options) {
+    let state = START;
+    const listeners = new Set();
+    const update = (change) => {
+        state = { ...state, ...change };
+        listeners.forEach((fn) => fn());
+    };
+    // A refusal during a step waits for the step to end: the busy button wears a
+    // bubble that wraps it, and the shake has to land on the button that stays.
+    let pending = {};
+    const refuse = (error, button, field = null) => {
+        const change = { error, refusal: { button, field, count: (state.refusal?.count ?? 0) + 1 } };
+        if (state.busy)
+            pending = change;
+        else
+            update(change);
+    };
+    async function run(busy, work) {
+        if (state.busy)
+            return;
+        update({ busy, error: null });
+        pending = {};
+        try {
+            await work();
+        }
+        catch {
+            refuse(options().text.failed, BUTTON_OF[busy]);
+        }
+        finally {
+            update({ busy: null, ...pending });
+        }
+    }
+    async function signIn() {
+        if (signInBlocked(state))
+            return;
+        const { text, onSignIn } = options();
+        return run("signIn", async () => {
+            const tried = state.needCode;
+            const res = await onSignIn({
+                password: state.viaPasskey ? "" : state.password,
+                code: tried ? state.code.trim() : undefined,
+                passkey: state.viaPasskey,
+            });
+            if (res.ok)
+                return;
+            if (res.needCode) {
+                // The first request for a code only opens the field.
+                update({ needCode: true, code: "" });
+                if (tried)
+                    refuse(res.error ?? text.codeInvalid, "submit", "code");
+                return;
+            }
+            // A passkey's sign-in that ended starts over with the password.
+            if (state.viaPasskey)
+                update({ viaPasskey: false, needCode: false, code: "" });
+            refuse(res.error ?? text.failed, "submit", state.needCode ? "code" : "password");
+        });
+    }
+    async function setPassword() {
+        const { text, minPassword, onSetPassword, onAskCode } = options();
+        if (resetBlocked(state) || !onSetPassword)
+            return;
+        if (state.newPassword !== state.confirm)
+            return refuse(text.mismatch, "set-password", "confirm");
+        if ([...state.newPassword].length < minPassword)
+            return refuse(text.tooShort, "set-password", "newPassword");
+        return run("setPassword", async () => {
+            const res = await onSetPassword({ code: state.resetCode.trim(), password: state.newPassword });
+            if (res.ok)
+                return;
+            if (res.rejected) {
+                // The answer does not say whether the code expired, and the sentence
+                // promises a new one in that case. Asking writes one only when none is live.
+                await onAskCode?.().catch(() => undefined);
+                refuse(text.resetRejected, "set-password", "resetCode");
+                return;
+            }
+            refuse(res.error ?? text.failed, "set-password", "resetCode");
+        });
+    }
+    return {
+        state: () => state,
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        },
+        set(field, value) {
+            update({ [field]: value });
+        },
+        submit: () => (state.view === "reset" ? setPassword() : signIn()),
+        async passkey() {
+            const { onPasskey } = options();
+            if (!onPasskey)
+                return;
+            return run("passkey", async () => {
+                const res = await onPasskey();
+                if (res.ok)
+                    return;
+                if (res.needCode)
+                    update({ viaPasskey: true, needCode: true, code: "" });
+                else if (res.error !== undefined)
+                    refuse(res.error, "passkey");
+            });
+        },
+        async forgot() {
+            const { text, onAskCode } = options();
+            if (!onAskCode)
+                return;
+            return run("askCode", async () => {
+                const res = await onAskCode();
+                if (res.ok)
+                    update({ view: "reset", resetCode: "", newPassword: "", confirm: "" });
+                else
+                    refuse(res.error ?? text.failed, "forgot");
+            });
+        },
+        back() {
+            if (state.busy)
+                return;
+            update({ view: "signIn", needCode: false, viaPasskey: false, code: "", error: null });
+        },
+    };
+}
+/** Sign in waits for the password, and in the second step for the code. */
+export function signInBlocked(s) {
+    if (s.busy)
+        return true;
+    if (s.needCode)
+        return s.code.trim() === "";
+    return s.password === "";
+}
+/** Set password waits for the code from the log and a new password. */
+export function resetBlocked(s) {
+    return !!s.busy || s.resetCode.trim() === "" || s.newPassword === "";
+}
+/**
+ * Which form shows, as a key that changes whenever the focus should move to
+ * the first empty field of the new form.
+ */
+export function signInStage(s) {
+    return `${s.view}:${s.needCode}:${s.viaPasskey}`;
+}
+// Walks up rather than reading the layout, which a page without one, such as a test's, does not have.
+function shown(el) {
+    for (let e = el; e; e = e.parentElement)
+        if (getComputedStyle(e).display === "none")
+            return false;
+    return true;
+}
+const FIELDS = 'input:not([type="hidden"], [type="checkbox"], [type="radio"], :disabled), textarea:not(:disabled)';
+/**
+ * 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 function focusFirstField(root) {
+    if (!root)
+        return;
+    const fields = [...root.querySelectorAll(FIELDS)].filter(shown);
+    (fields.find((f) => f.value === "") ?? fields[0])?.focus({ preventScroll: true });
+}
+/**
+ * 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 function showRefusal(root, refusal) {
+    const field = refusal.field && root?.querySelector(`[data-signin-field="${refusal.field}"]`);
+    if (field) {
+        field.focus({ preventScroll: true });
+        field.select();
+    }
+    const button = root?.querySelector(`[data-signin="${refusal.button}"]`);
+    return button ? shake(button) : () => { };
+}

package/dist/theme.d.ts

@@ -0,0 +1,14 @@
+/** Whether the dark ramp shows for a `data-theme` value and the system's preference. */
+export declare function resolvesDark(theme: string | null | undefined, systemDark: boolean): boolean;
+/** Whether the dark ramp is showing now, by choice or because the system is dark. */
+export declare function darkShowing(): boolean;
+/**
+ * Calls `fn` whenever the dark ramp starts or stops showing, through a theme
+ * choice or the system, so a settings page can say whether OLED is in effect.
+ * Returns the function that stops watching.
+ */
+export declare function watchDarkShowing(fn: (dark: boolean) => void): () => void;
+/** Turns OLED on or off and remembers it on this device. */
+export declare function applyOled(on: boolean): void;
+/** Whether OLED is on for this device. */
+export declare function storedOled(): boolean;

package/dist/theme.js

@@ -0,0 +1,71 @@
+// Which ramp is showing, and the OLED variant of the dark one. The theme
+// itself is `data-theme` on <html>, `light`, `dark` or unset for the system.
+// OLED is `data-oled` on <html>, present or absent; tokens.css applies it only
+// while the dark ramp shows, so it can stay on through a switch to light.
+//
+// OLED belongs to the screen, not the person, so it is kept on the device and
+// never with settings a server syncs: the same account may sign in on an LCD
+// laptop.
+import { storageKey } from './storage.js';
+const SYSTEM_DARK = '(prefers-color-scheme: dark)';
+/** Whether the dark ramp shows for a `data-theme` value and the system's preference. */
+export function resolvesDark(theme, systemDark) {
+    if (theme === 'dark')
+        return true;
+    if (theme === 'light')
+        return false;
+    return systemDark;
+}
+/** Whether the dark ramp is showing now, by choice or because the system is dark. */
+export function darkShowing() {
+    return resolvesDark(document.documentElement.getAttribute('data-theme'), matchMedia(SYSTEM_DARK).matches);
+}
+/**
+ * Calls `fn` whenever the dark ramp starts or stops showing, through a theme
+ * choice or the system, so a settings page can say whether OLED is in effect.
+ * Returns the function that stops watching.
+ */
+export function watchDarkShowing(fn) {
+    let last = darkShowing();
+    const check = () => {
+        const next = darkShowing();
+        if (next === last)
+            return;
+        last = next;
+        fn(next);
+    };
+    const media = matchMedia(SYSTEM_DARK);
+    media.addEventListener('change', check);
+    const observer = new MutationObserver(check);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+    return () => {
+        media.removeEventListener('change', check);
+        observer.disconnect();
+    };
+}
+/** Turns OLED on or off and remembers it on this device. */
+export function applyOled(on) {
+    const root = document.documentElement;
+    if (on)
+        root.setAttribute('data-oled', '');
+    else
+        root.removeAttribute('data-oled');
+    try {
+        if (on)
+            localStorage.setItem(storageKey('oled'), '1');
+        else
+            localStorage.removeItem(storageKey('oled'));
+    }
+    catch {
+        // The switch still holds until the page closes.
+    }
+}
+/** Whether OLED is on for this device. */
+export function storedOled() {
+    try {
+        return localStorage.getItem(storageKey('oled')) === '1';
+    }
+    catch {
+        return false;
+    }
+}

package/dist/version.d.ts

@@ -2,4 +2,4 @@
  * The version every GlimStone package carries, so an app's Version card names
  * the one it runs. All packages share it and move together.
  */
-export declare const GLIMSTONE_VERSION = "4.1.1";
+export declare const GLIMSTONE_VERSION = "4.2.2";

package/dist/version.js

@@ -2,4 +2,4 @@
  * The version every GlimStone package carries, so an app's Version card names
  * the one it runs. All packages share it and move together.
  */
-export const GLIMSTONE_VERSION = "4.1.1";
+export const GLIMSTONE_VERSION = "4.2.2";

package/glyph-map.md

@@ -228,6 +228,7 @@ ArrowLoop drew the glyphs for the segments of its Design, Corners and Motion sel
 | Row height selector, Compact | `IconRowCompact` | none | none | `IconRowCompact`, standard |
 | Row height selector, Medium | `IconRowMedium` | none | none | `IconRowMedium`, standard |
 | Row height selector, Comfortable | `IconRowComfortable` | none | none | `IconRowComfortable`, standard |
+| Accent row, the swatch that takes the system's colour | `IconAccentSystem` | none | none | none |
 
 <br>
 

package/glyphs.json

@@ -1234,6 +1234,19 @@
   ],
   "svg": "<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0 3A1.2 1.2 0 0 1 1.2 1.8H12.8A1.2 1.2 0 0 1 12.8 4.2H1.2A1.2 1.2 0 0 1 0 3ZM0 11A1.2 1.2 0 0 1 1.2 9.8H12.8A1.2 1.2 0 0 1 12.8 12.2H1.2A1.2 1.2 0 0 1 0 11Z\" />"
  },
+ {
+  "name": "IconAccentSystem",
+  "means": "The accent takes the system's colour",
+  "source": "Drawn for GlimStone",
+  "viewBox": "0.5 0.5 13 13",
+  "ink": [
+   0.5,
+   0.5,
+   13,
+   13
+  ],
+  "svg": "<path fill=\"currentColor\" d=\"M0.793 11.793L6.893 5.693A1 1 0 0 1 8.307 7.107L2.207 13.207A1 1 0 0 1 0.793 11.793ZM10.5 0.5Q11 3 13.5 3.5Q11 4 10.5 6.5Q10 4 7.5 3.5Q10 3 10.5 0.5ZM3.75 2.25Q4.1 3.65 5.5 4Q4.1 4.35 3.75 5.75Q3.4 4.35 2 4Q3.4 3.65 3.75 2.25ZM11 9Q11.35 10.4 12.75 10.75Q11.35 11.1 11 12.5Q10.65 11.1 9.25 10.75Q10.65 10.4 11 9Z\"></path>"
+ },
  {
   "name": "IconGear",
   "means": "Settings, open a setting",

package/glyphs.md

@@ -259,7 +259,7 @@ A file manager tells a file's kind by its glyph before its name is read, so thes
 | `IconDiagnostics` | Diagnostics | Streamline `programming/bug.svg` |
 | `IconKeyboard` | Keyboard shortcuts | Streamline `computer-devices/keyboard.svg` |
 
-### Look settings, the segments of the Design, Corners, Motion, Labels and Row height selectors
+### Look settings, the segments of the Design, Corners, Motion, Labels and Row height selectors, and the system accent swatch
 
 | Name | Means | Source |
 | --- | --- | --- |
@@ -279,8 +279,9 @@ A file manager tells a file's kind by its glyph before its name is read, so thes
 | `IconRowCompact` | Compact rows | Drawn for GlimStone |
 | `IconRowMedium` | Medium rows | Drawn for GlimStone |
 | `IconRowComfortable` | Comfortable rows | Drawn for GlimStone |
+| `IconAccentSystem` | The accent takes the system's colour | Drawn for GlimStone |
 
-The Design selector's Dark and Light segments wear `IconMoon` and `IconSun` from the actions above, and System wears `IconThemeSystem`, a ring with one half filled. Each corner glyph is a frame drawn with the corners it names, so the four read as one family whatever corners the selector around them has. The motion glyphs are one line that swings further at each level, just as a level is the same animation with bigger numbers. `IconCornerLeaf` and `IconMotionStorm` belong to the hidden shape and the hidden level and stand only where the selector offers those. The four label glyphs draw a choice with a disc for the glyph and bars for the words: three bars for Text, a small disc before two bars for Text and glyph, a large disc alone for Glyph, and for Reactive a disc with a pointer arrow at its corner, since that mode opens the words under the pointer. The row glyphs are bars across the full width at three spacings, four close ones for Compact, three for Medium and two far apart for Comfortable. Only the gap between the bars sets the three apart.
+The Design selector's Dark and Light segments wear `IconMoon` and `IconSun` from the actions above, and System wears `IconThemeSystem`, a ring with one half filled. Each corner glyph is a frame drawn with the corners it names, so the four read as one family whatever corners the selector around them has. The motion glyphs are one line that swings further at each level, just as a level is the same animation with bigger numbers. `IconCornerLeaf` and `IconMotionStorm` belong to the hidden shape and the hidden level and stand only where the selector offers those. The four label glyphs draw a choice with a disc for the glyph and bars for the words: three bars for Text, a small disc before two bars for Text and glyph, a large disc alone for Glyph, and for Reactive a disc with a pointer arrow at its corner, since that mode opens the words under the pointer. The row glyphs are bars across the full width at three spacings, four close ones for Compact, three for Medium and two far apart for Comfortable. Only the gap between the bars sets the three apart. `IconAccentSystem` stands on the swatch before the accent presets that takes the colour from the device: a wand with a large spark at its tip and two small ones beside it.
 
 **`IconGrip` is two columns of three dots**, the handle TowerTorch and KnightLoader each drew for a row that drags.
 
@@ -288,7 +289,7 @@ The Design selector's Dark and Light segments wear `IconMoon` and `IconSun` from
 
 **Taking something away draws a slash through it.** `IconEyeOff`, `IconKeyRevoke`, `IconShieldOff` and `IconUnlink` are an eye, a key, a shield and a chain link with one bar from the top left to the bottom right, so the undoing reads the same on every one of them.
 
-**Close meanings wear different drawings.** `IconRetry` tries again, reloads or refreshes, and `IconRefresh` goes back to the default whatever its name says. `IconResetArrow` does the same for one row inside a colour card, where a full-size reset beside the swatches would read as resetting the card. `IconQueued` waits its turn, and `IconHourglass` marks a file that is a backup copy or not finished yet. `IconUpload` and `IconDownload` move a file to or from somewhere else, while `IconImport` and `IconExport` read a list or settings in and write them out. `IconCheck` marks a test and the success it reports, and `IconConfirm` is a person agreeing: Done, Confirm, Got it. `IconApply` takes something over in place of what was there, which is not saving. `IconCompressAuto` marks anything the app chooses by itself, the compression as well as the order of the providers, and keeps its name for the apps that generate from this list. `IconSync` checks for an update and fetches it, and `IconUpdate` marks an updates tab or section, where its cloud has room to read. The check answers with `IconUpToDate` when there was none to fetch, the cloud with a tick, and with `IconUpdateAvailable` when there is. `IconMoon` is the dark look and nothing else; a disk spinning down, a machine going to rest and a VM put into hibernation wear `IconSleep`.
+**Close meanings wear different drawings.** `IconRetry` tries again, reloads or refreshes, and `IconRefresh` goes back to the default whatever its name says. `IconResetArrow` does the same for one row inside a colour card, where a full-size reset beside the swatches would read as resetting the card. `IconQueued` waits its turn, and `IconHourglass` marks a file that is a backup copy or not finished yet. `IconUpload` and `IconDownload` move a file to or from somewhere else, while `IconImport` and `IconExport` read a list or settings in and write them out. `IconCheck` marks a test and the success it reports, and `IconConfirm` is a person agreeing: Done, Confirm, Got it. `IconApply` takes something over in place of what was there, which is not saving. `IconCompressAuto` marks anything the app chooses by itself, the compression as well as the order of the providers, and keeps its name for the apps that generate from this list. Its wand and spark are Streamline's, and `IconAccentSystem` draws its own with three sparks, since taking the device's colour is a different meaning. `IconSync` checks for an update and fetches it, and `IconUpdate` marks an updates tab or section, where its cloud has room to read. The check answers with `IconUpToDate` when there was none to fetch, the cloud with a tick, and with `IconUpdateAvailable` when there is. `IconMoon` is the dark look and nothing else; a disk spinning down, a machine going to rest and a VM put into hibernation wear `IconSleep`.
 
 **A brand mark is the brand's own and goes only where it is meant.** `IconCoffee` is Buy Me a Coffee's mark and stands only on the button that leads there, and `IconCaptcha` is reCAPTCHA's mark and stands only where a captcha is the subject. `IconPayPal` and `IconBitcoin` stand only on the buttons that open the PayPal and the crypto window. `IconContainers` and `IconGithub` follow the same rule (section 1).
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glimstone/core",
-  "version": "4.1.1",
+  "version": "4.2.2",
   "description": "GlimStone's tokens, glyphs and engines, without a framework",
   "license": "AGPL-3.0-only",
   "repository": { "type": "git", "url": "git+https://github.com/junkerderprovinz/glimstone.git", "directory": "packages/core" },

package/tokens.css

@@ -154,11 +154,13 @@
      the same colour and the light theme is where they part, so use this rather
      than --accent whenever the colour is read.
 
-     The theme sets only --ink-mix, which <html> passes down, so the one-line
-     mix is right in both themes and the rainbow blocks need no light twin.
-     100% of a colour mixed with black is that colour. */
+     The theme sets --ink-mix, which <html> passes down, so the one-line mix
+     is right in both themes and the rainbow blocks need no light twin. 100% of
+     a colour mixed with black is that colour. An accent the mix leaves under
+     4.5:1 on a ramp's card gets that ramp's ink from applyAccent instead, as
+     --accent-ink-dark or --accent-ink-light; no preset needs one. */
   --ink-mix:           100%;
-  --accent-ink:        color-mix(in srgb, var(--accent) var(--ink-mix), black);
+  --accent-ink:        var(--accent-ink-dark, color-mix(in srgb, var(--accent) var(--ink-mix), black));
   /* The same ink for a line-drawn glyph. Rainbow never colours text, so a hued
      subtree redefines this one and leaves --accent-ink on the single accent. */
   --accent-glyph:      var(--accent-ink);
@@ -240,6 +242,7 @@
     --accent-contrast:   #161616;
     --accent-soft:       rgba(252, 196, 25, 0.14);
     --ink-mix:           55%;
+    --accent-ink:        var(--accent-ink-light, color-mix(in srgb, var(--accent) var(--ink-mix), black));
 
     --status-info-text:    #8E6A00;
     --status-info-bg:      rgba(142, 106, 0, 0.12);
@@ -313,6 +316,7 @@
   --accent-contrast:   #161616;
   --accent-soft:       rgba(252, 196, 25, 0.14);
   --ink-mix:           55%;
+  --accent-ink:        var(--accent-ink-light, color-mix(in srgb, var(--accent) var(--ink-mix), black));
 
   --status-info-text:    #8E6A00;
   --status-info-bg:      rgba(142, 106, 0, 0.12);
@@ -342,6 +346,51 @@
   --focus-ring: rgba(142, 106, 0, .5);
 }
 
+/* OLED, the dark ramp on true black for OLED and AMOLED screens (rule 43).
+   `data-oled` on <html> asks for it and counts only while the dark ramp shows,
+   chosen or from the system, so the two selectors below follow the two ways a
+   page goes dark. The surfaces move one Carbon step down and keep their order,
+   so every rule that names a step still lands on the step it meant. The hover
+   keeps its place between the card and surface2, and hover-raised is the step
+   above surface3, as on the dark ramp. The text ramp, the accent and the state
+   hues stay: they were measured on darker grounds than they get here.
+
+   A shadow on black is invisible, so the elevation becomes a ring in the
+   border colour. The switch track stays at #525252 rather than following
+   surface3 down, where it would fall to 1.6:1 on the card. The opaque warning
+   chip stands further from a #161616 card than from a #262626 one, and the
+   hairline and the scrim lose nothing on black, so they stay as well. A lit
+   brand tile in a near-black colour, such as GitHub's, would vanish into the
+   card, so --tile-edge rings every lit tile. */
+[data-theme="dark"][data-oled] {
+  --carbon-bg:         #000000;
+  --carbon-sidebar:    #161616;
+  --carbon-surface:    #161616;
+  --carbon-surface2:   #262626;
+  --carbon-surface3:   #393939;
+  --carbon-hover:      #232323;
+  --carbon-hover-raised: #525252;
+  --carbon-border:     #262626;
+  --elevation: 0 0 0 1px #262626;
+  --tile-edge: rgba(255, 255, 255, .2);
+}
+
+/* The same values for the system's dark, with no light theme chosen. */
+@media (prefers-color-scheme: dark) {
+  :root[data-oled]:not([data-theme="light"]) {
+    --carbon-bg:         #000000;
+    --carbon-sidebar:    #161616;
+    --carbon-surface:    #161616;
+    --carbon-surface2:   #262626;
+    --carbon-surface3:   #393939;
+    --carbon-hover:      #232323;
+    --carbon-hover-raised: #525252;
+    --carbon-border:     #262626;
+    --elevation: 0 0 0 1px #262626;
+    --tile-edge: rgba(255, 255, 255, .2);
+  }
+}
+
 /* The hover step of a filled tone that has no surface ramp of its own (rule
    21): the fill mixed toward the theme's text colour, which is lighter on dark
    and darker on light, the direction the ramp moves. 15% is about one step of
@@ -913,10 +962,13 @@ body {
       glim-page-in var(--motion-page-dur) var(--motion-page-ease) both,
       glim-fade-in var(--motion-page-dur) ease-out both;
   }
+  /* Backwards, not both: a held end is an identity matrix rather than none,
+     and any transform makes the card the containing block of a fixed element
+     inside it. */
   .glim-toast {
     animation:
-      glim-toast-in var(--motion-toast-dur) var(--motion-toast-ease, var(--motion-page-ease)) both,
-      glim-fade-in var(--motion-toast-dur) ease-out both;
+      glim-toast-in var(--motion-toast-dur) var(--motion-toast-ease, var(--motion-page-ease)) backwards,
+      glim-fade-in var(--motion-toast-dur) ease-out backwards;
   }
   .glim-live { animation: glim-pulse var(--motion-pulse-dur) ease-in-out infinite; }
   /* Short, because the pointer is already waiting for the bubble. */
@@ -1188,7 +1240,7 @@ body {
    state is hidden. */
 @media (prefers-reduced-motion: reduce) {
   :root:not([data-motion='storm']) .glim-page-enter { animation: glim-fade-in 180ms ease both; }
-  :root:not([data-motion='storm']) .glim-toast { animation: glim-fade-in 160ms ease both; }
+  :root:not([data-motion='storm']) .glim-toast { animation: glim-fade-in 160ms ease backwards; }
   /* An infinite animation stops outright, fully opaque, so "this is live"
      reads from colour and position. Storm is not exempt here: wanting more
      movement is not wanting something that never stops. */
@@ -1203,8 +1255,8 @@ body {
   }
   :root[data-motion='storm'] .glim-toast {
     animation:
-      glim-toast-in var(--motion-toast-dur) var(--motion-toast-ease, var(--motion-page-ease)) both,
-      glim-fade-in var(--motion-toast-dur) ease-out both;
+      glim-toast-in var(--motion-toast-dur) var(--motion-toast-ease, var(--motion-page-ease)) backwards,
+      glim-fade-in var(--motion-toast-dur) ease-out backwards;
   }
   :root[data-motion='storm'] .glim-shake { animation: glim-shake var(--motion-shake-dur) ease-in-out; }
 }
@@ -1950,6 +2002,19 @@ body {
    smallest floor. An explicit stage is a width of its own and stays. */
 .glim-modal-foot > :is(.glim-btn-sm, .glim-btn-md, .glim-btn-lg),
 .glim-modal-foot > .glim-tip-wrap > :is(.glim-btn-sm, .glim-btn-md, .glim-btn-lg) { min-width: var(--btn-w-xs); }
+/* A button wider than the whole foot, as on a phone, runs its words onto a
+   second line and grows with them instead of ending in an ellipsis. */
+:is(.glim-modal-foot, .glim-modal-foot > .glim-tip-wrap) > .glim-btn {
+  height: auto;
+  min-height: var(--btn-h);
+  padding-block: 0.375rem;
+}
+:is(.glim-modal-foot, .glim-modal-foot > .glim-tip-wrap) > .glim-btn-key { min-height: var(--btn-h-key); }
+:is(.glim-modal-foot, .glim-modal-foot > .glim-tip-wrap) > .glim-btn > .glim-btn-label {
+  white-space: normal;
+  text-wrap: balance;
+  text-align: center;
+}
 .glim-path > .glim-btn:not(.glim-btn-icon) { min-width: 0; }
 
 /* Rule 40. A surface-filled button's hovered ground takes 22% of the tint and
@@ -2003,6 +2068,7 @@ body {
   .group:hover > .glim-brand-tile {
     background-color: var(--tile);
     color: var(--tile-ink);
+    box-shadow: inset 0 0 0 1px var(--tile-edge, transparent);
     --mark-ink: var(--tile-ink);
     --mark-cut: var(--tile);
     --brand-android: var(--tile-ink);
@@ -3167,6 +3233,96 @@ body {
     font-weight: inherit;
   }
 
+  /* The sign-in page (SignInCard): one card in the middle of the screen, the
+     same width in every app, and the full width less the gutter on a phone. */
+  .glim-signin {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100dvh;
+    padding: 1rem;
+    background-color: var(--carbon-bg);
+    color: var(--carbon-text);
+  }
+  .glim-signin-card {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    width: min(24rem, 100%);
+    padding: 2rem;
+  }
+  .glim-signin-head {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+  }
+  .glim-signin-logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 4rem;
+    height: 4rem;
+  }
+  .glim-signin-logo > :is(img, svg) {
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+  .glim-signin-name {
+    margin: 0;
+    font-size: var(--text-status);
+    font-weight: 600;
+    line-height: 1.2;
+    text-align: center;
+    overflow-wrap: anywhere;
+  }
+  .glim-signin-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin: 0;
+  }
+  /* Every button as wide as the fields, also one a bubble wraps while disabled. */
+  .glim-signin-form > :is(.glim-btn, .glim-tip-wrap),
+  .glim-signin-form > .glim-tip-wrap > .glim-btn { width: 100%; }
+  .glim-signin-form p { margin: 0; }
+  .glim-signin-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+  }
+  .glim-signin-field[hidden] { display: none; }
+  .glim-signin-label {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    color: var(--carbon-text-sub);
+    font-size: var(--text-meta);
+    font-weight: 500;
+  }
+  .glim-signin-hint {
+    color: var(--carbon-text-sub);
+    font-size: var(--text-meta);
+  }
+  .glim-signin-error {
+    color: var(--status-fail-text);
+    font-size: var(--text-meta);
+  }
+  .glim-signin-note {
+    padding: 0.6rem 0.8rem;
+    border-radius: var(--radius-control);
+    background-color: var(--carbon-surface2);
+    font-size: var(--text-subline);
+  }
+  .glim-signin-code { letter-spacing: 0.35em; }
+  .glim-signin-log-code,
+  .glim-signin-log-code::placeholder {
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+  }
+
   /* What stands in place of a control the environment forbids
      (UnavailableNotice). A paragraph, because there is no control to hang an
      info bubble off. */
@@ -3423,7 +3579,9 @@ body {
     margin: 0;
     text-wrap: pretty;
     font-size: 0.875rem;
-    line-height: 1.375;
+    /* Whole pixels per line, or every toast stacked beside this one lands on a
+       fraction and Chromium rounds its edges differently from paint to paint. */
+    line-height: 1.25rem;
     overflow-wrap: break-word;
   }
   /* A phone keeps the window in view: the newest two across its width. */