genshin-interface 4.4.0 → 4.5.0

package/README.md

@@ -5,9 +5,9 @@
 [![NPM downloads][badge-npm-downloads]][url-npm]
 [![NPM Unpacked Size (with version)][badge-npm-unpacked-size]][url-npm]
 
-Genshin Impact's interface as a fan recreation: the game's own screen units, face and pointer, and its buttons, dividers, bars and notices as presentational Vue components.
+Genshin Impact's interface as a fan recreation. It provides the game's own screen units, face and pointer, and its buttons, dividers, bars and notices, as presentational Vue components.
 
-It is an unofficial, non-commercial fan work, not affiliated with HoYoverse. It ships no image or font from the game: each glyph is a vector path traced from the game's own, and the face is the open one nearest it.
+It is an unofficial, non-commercial fan work. It is not affiliated with HoYoverse. It ships no image or font from the game. Each glyph is a vector path, traced from the game's own. The face is the open face nearest to the game's.
 
 Design notes live in [the specs](https://github.com/Esposter/Esposter/tree/main/openspec/specs/genshin/interface-library).
 
@@ -25,7 +25,9 @@ Design notes live in [the specs](https://github.com/Esposter/Esposter/tree/main/
 pnpm i genshin-interface vue
 ```
 
-Draw a screen inside `GameScreen`, lay it out in `calc(var(--unit) * n)`, and load the styles once:
+1. Draw each screen inside `GameScreen`.
+2. Lay out each screen in `calc(var(--unit) * n)`.
+3. Import the styles once, as shown:
 
 ```vue
 <script setup lang="ts">
@@ -42,18 +44,18 @@ import "genshin-interface/style.css";
 
 ## <a name="key-exports">🧩 Key Exports</a>
 
-| Export              | Kind      | Purpose                                                                                  |
-| ------------------- | --------- | ---------------------------------------------------------------------------------------- |
-| `GameScreen`        | component | The root every screen of the game is drawn in: its 1920 by 1080 unit, face and pointer   |
-| `InterfaceClip`     | interface | One of the game's interface animation clips: a span and a track per property it moves    |
-| `InterfaceIcon`     | enum      | The glyphs the round buttons wear                                                        |
-| `LoadingSpinner`    | component | The game's wait mark, labelled for a screen reader                                       |
-| `OrnamentDivider`   | component | The game's divider: a hairline with diamonds at its ends, and its middle unless hidden   |
-| `playInterfaceClip` | function  | Plays a clip on a screen with Web Animations and returns the animations to await or seek |
-| `ProgressBar`       | component | The game's progress bar, filled from 0 to 1                                              |
-| `PromptBand`        | component | The band a prompt is set in across the foot of a screen                                  |
-| `RoundButton`       | component | The game's round button with a glyph, labelled for a screen reader                       |
-| `ToastNotice`       | component | The game's notice card, dropped at the top of a screen                                   |
+| Export              | Kind      | Purpose                                                                                       |
+| ------------------- | --------- | --------------------------------------------------------------------------------------------- |
+| `GameScreen`        | component | The root of every game screen, with its 1920 by 1080 unit, face and pointer                   |
+| `InterfaceClip`     | interface | One interface animation clip of the game, with a span and a track for each property it moves  |
+| `InterfaceIcon`     | enum      | The glyphs that the round buttons show                                                        |
+| `LoadingSpinner`    | component | The game's wait mark, with a label for a screen reader                                        |
+| `OrnamentDivider`   | component | The game's divider: a hairline with diamonds at its ends, and a middle ornament unless hidden |
+| `playInterfaceClip` | function  | Plays a clip on a screen with Web Animations, and returns the animations to await or seek     |
+| `ProgressBar`       | component | The game's progress bar, filled from 0 to 1                                                   |
+| `PromptBand`        | component | The band that holds a prompt, across the foot of a screen                                     |
+| `RoundButton`       | component | The game's round button, with a glyph and a label for a screen reader                         |
+| `ToastNotice`       | component | The game's notice card, dropped at the top of a screen                                        |
 
 ## <a name="license">⚖️ License</a>
 

package/dist/{constants-DeI20p3G.d.ts → constants-CLLAons1.d.ts}

@@ -40,6 +40,8 @@ declare const CONSTELLATION_NODE_PLACES: readonly {
 }[];
 declare const INTERACTION_HOVER_MS = 50;
 declare const INTERACTION_REST_MS = 100;
+declare const INTERACTION_HOVER_DURATION = "50ms";
+declare const INTERACTION_REST_DURATION = "100ms";
 declare const INTERACTION_PILL_REST_MS = 200;
 declare const INTERACTION_PRESS_MS = 167;
 declare const GAME_SMOOTHSTEP_EASING = "cubic-bezier(0.333, 0, 0.667, 1)";
@@ -48,6 +50,7 @@ declare const GAME_ROW_PRESS = "rgb(255 255 255 / 0.3)";
 declare const GAME_REPLY_REST = "rgb(0 0 0 / 0.26)";
 declare const GAME_REPLY_HOVER = "rgb(255 255 255 / 0.85)";
 declare const GAME_REPLY_HOVER_INK = "#3b4255";
+declare const DIALOGUE_REPLY_REST = "rgb(32 40 57 / 0.72)";
 declare const GAME_LIT_GOLD = "#ffeab4";
 declare const GAME_LIT_GOLD_LABEL = "#d6cdb8";
 declare const GAME_DIALOGUE_GOLD = "#ffc700";
@@ -59,4 +62,4 @@ declare const MISMATCH_RATIO_BAR = 0.01;
 declare const MISMATCH_MESSAGE = "Screenshot does not match the stored reference.";
 declare const MISMATCH_DETAIL_REGEX: RegExp;
 declare const MISSING_IMAGE_MESSAGE = "No existing reference screenshot found";
-export { GAME_ROW_PRESS as A, MISMATCH_MESSAGE as B, GAME_INK as C, GAME_REPLY_HOVER_INK as D, GAME_REPLY_HOVER as E, INTERACTION_KEY_LABEL as F, ORNAMENT_MIDDLE_PATH as G, MISSING_IMAGE_MESSAGE as H, INTERACTION_PILL_REST_MS as I, SERVER_MARK_TICK_PATH as J, ROLE_FLOURISH_PATH as K, INTERACTION_PRESS_MS as L, GAME_UNIT as M, GAME_WHITE as N, GAME_REPLY_REST as O, INTERACTION_HOVER_MS as P, CanvasRect as Q, INTERACTION_REST_MS as R, GAME_GOLD as S, GAME_LIT_GOLD_LABEL as T, MOBILE_INTERFACE_SCALE as U, MISMATCH_RATIO_BAR as V, ORNAMENT_END_PATH as W, SETTINGS_RING_RADIUS as X, SETTINGS_RING_CENTRE as Y, SETTINGS_RING_WIDTH as Z, GAME_CANVAS_UNIT as _, CONSTELLATION_NODE_PLACES as a, GAME_DIALOGUE_GOLD as b, COOKING_ARC_RADIUS_X as c, FIXTURE_VARIANT_SEPARATOR as d, GAME_BACKDROP_BLUR as f, GAME_CANVAS_RECT as g, GAME_CANVAS_INSET as h, CHECK_MARK_PATH as i, GAME_SMOOTHSTEP_EASING as j, GAME_ROW_HOVER as k, COOKING_ZONE_RADIUS_Y as l, GAME_BACKDROP_WASH as m, ASCENSION_PHASE_COUNT as n, COOKING_ARC_CENTRE_X as o, GAME_BACKDROP_KEEP as p, SERVER_MARK_DIAMOND_PATH as q, BACK_ARROW_PATH as r, COOKING_ARC_CENTRE_Y as s, APPROVE_ENVIRONMENT_VARIABLE as t, FIXTURE_IMAGE_NAME as u, GAME_CREAM as v, GAME_LIT_GOLD as w, GAME_FONT_FAMILY as x, GAME_CURSOR as y, MISMATCH_DETAIL_REGEX as z };
+export { SETTINGS_RING_RADIUS as $, GAME_ROW_HOVER as A, INTERACTION_REST_DURATION as B, GAME_GOLD as C, GAME_REPLY_HOVER as D, GAME_LIT_GOLD_LABEL as E, INTERACTION_HOVER_DURATION as F, MISSING_IMAGE_MESSAGE as G, MISMATCH_DETAIL_REGEX as H, INTERACTION_HOVER_MS as I, ORNAMENT_MIDDLE_PATH as J, MOBILE_INTERFACE_SCALE as K, INTERACTION_KEY_LABEL as L, GAME_SMOOTHSTEP_EASING as M, GAME_UNIT as N, GAME_REPLY_HOVER_INK as O, GAME_WHITE as P, SETTINGS_RING_CENTRE as Q, INTERACTION_PILL_REST_MS as R, GAME_FONT_FAMILY as S, GAME_LIT_GOLD as T, MISMATCH_MESSAGE as U, INTERACTION_REST_MS as V, MISMATCH_RATIO_BAR as W, SERVER_MARK_DIAMOND_PATH as X, ROLE_FLOURISH_PATH as Y, SERVER_MARK_TICK_PATH as Z, GAME_CANVAS_RECT as _, CONSTELLATION_NODE_PLACES as a, GAME_CURSOR as b, COOKING_ARC_RADIUS_X as c, FIXTURE_IMAGE_NAME as d, SETTINGS_RING_WIDTH as et, FIXTURE_VARIANT_SEPARATOR as f, GAME_CANVAS_INSET as g, GAME_BACKDROP_WASH as h, CHECK_MARK_PATH as i, GAME_ROW_PRESS as j, GAME_REPLY_REST as k, COOKING_ZONE_RADIUS_Y as l, GAME_BACKDROP_KEEP as m, ASCENSION_PHASE_COUNT as n, COOKING_ARC_CENTRE_X as o, GAME_BACKDROP_BLUR as p, ORNAMENT_END_PATH as q, BACK_ARROW_PATH as r, COOKING_ARC_CENTRE_Y as s, APPROVE_ENVIRONMENT_VARIABLE as t, CanvasRect as tt, DIALOGUE_REPLY_REST as u, GAME_CANVAS_UNIT as v, GAME_INK as w, GAME_DIALOGUE_GOLD as x, GAME_CREAM as y, INTERACTION_PRESS_MS as z };

package/dist/constants.d.ts

@@ -1,2 +1,2 @@
-import { A as GAME_ROW_PRESS, B as MISMATCH_MESSAGE, C as GAME_INK, D as GAME_REPLY_HOVER_INK, E as GAME_REPLY_HOVER, F as INTERACTION_KEY_LABEL, G as ORNAMENT_MIDDLE_PATH, H as MISSING_IMAGE_MESSAGE, I as INTERACTION_PILL_REST_MS, J as SERVER_MARK_TICK_PATH, K as ROLE_FLOURISH_PATH, L as INTERACTION_PRESS_MS, M as GAME_UNIT, N as GAME_WHITE, O as GAME_REPLY_REST, P as INTERACTION_HOVER_MS, R as INTERACTION_REST_MS, S as GAME_GOLD, T as GAME_LIT_GOLD_LABEL, U as MOBILE_INTERFACE_SCALE, V as MISMATCH_RATIO_BAR, W as ORNAMENT_END_PATH, X as SETTINGS_RING_RADIUS, Y as SETTINGS_RING_CENTRE, Z as SETTINGS_RING_WIDTH, _ as GAME_CANVAS_UNIT, a as CONSTELLATION_NODE_PLACES, b as GAME_DIALOGUE_GOLD, c as COOKING_ARC_RADIUS_X, d as FIXTURE_VARIANT_SEPARATOR, f as GAME_BACKDROP_BLUR, g as GAME_CANVAS_RECT, h as GAME_CANVAS_INSET, i as CHECK_MARK_PATH, j as GAME_SMOOTHSTEP_EASING, k as GAME_ROW_HOVER, l as COOKING_ZONE_RADIUS_Y, m as GAME_BACKDROP_WASH, n as ASCENSION_PHASE_COUNT, o as COOKING_ARC_CENTRE_X, p as GAME_BACKDROP_KEEP, q as SERVER_MARK_DIAMOND_PATH, r as BACK_ARROW_PATH, s as COOKING_ARC_CENTRE_Y, t as APPROVE_ENVIRONMENT_VARIABLE, u as FIXTURE_IMAGE_NAME, v as GAME_CREAM, w as GAME_LIT_GOLD, x as GAME_FONT_FAMILY, y as GAME_CURSOR, z as MISMATCH_DETAIL_REGEX } from "./constants-DeI20p3G.js";
-export { APPROVE_ENVIRONMENT_VARIABLE, ASCENSION_PHASE_COUNT, BACK_ARROW_PATH, CHECK_MARK_PATH, CONSTELLATION_NODE_PLACES, COOKING_ARC_CENTRE_X, COOKING_ARC_CENTRE_Y, COOKING_ARC_RADIUS_X, COOKING_ZONE_RADIUS_Y, FIXTURE_IMAGE_NAME, FIXTURE_VARIANT_SEPARATOR, GAME_BACKDROP_BLUR, GAME_BACKDROP_KEEP, GAME_BACKDROP_WASH, GAME_CANVAS_INSET, GAME_CANVAS_RECT, GAME_CANVAS_UNIT, GAME_CREAM, GAME_CURSOR, GAME_DIALOGUE_GOLD, GAME_FONT_FAMILY, GAME_GOLD, GAME_INK, GAME_LIT_GOLD, GAME_LIT_GOLD_LABEL, GAME_REPLY_HOVER, GAME_REPLY_HOVER_INK, GAME_REPLY_REST, GAME_ROW_HOVER, GAME_ROW_PRESS, GAME_SMOOTHSTEP_EASING, GAME_UNIT, GAME_WHITE, INTERACTION_HOVER_MS, INTERACTION_KEY_LABEL, INTERACTION_PILL_REST_MS, INTERACTION_PRESS_MS, INTERACTION_REST_MS, MISMATCH_DETAIL_REGEX, MISMATCH_MESSAGE, MISMATCH_RATIO_BAR, MISSING_IMAGE_MESSAGE, MOBILE_INTERFACE_SCALE, ORNAMENT_END_PATH, ORNAMENT_MIDDLE_PATH, ROLE_FLOURISH_PATH, SERVER_MARK_DIAMOND_PATH, SERVER_MARK_TICK_PATH, SETTINGS_RING_CENTRE, SETTINGS_RING_RADIUS, SETTINGS_RING_WIDTH };
+import { $ as SETTINGS_RING_RADIUS, A as GAME_ROW_HOVER, B as INTERACTION_REST_DURATION, C as GAME_GOLD, D as GAME_REPLY_HOVER, E as GAME_LIT_GOLD_LABEL, F as INTERACTION_HOVER_DURATION, G as MISSING_IMAGE_MESSAGE, H as MISMATCH_DETAIL_REGEX, I as INTERACTION_HOVER_MS, J as ORNAMENT_MIDDLE_PATH, K as MOBILE_INTERFACE_SCALE, L as INTERACTION_KEY_LABEL, M as GAME_SMOOTHSTEP_EASING, N as GAME_UNIT, O as GAME_REPLY_HOVER_INK, P as GAME_WHITE, Q as SETTINGS_RING_CENTRE, R as INTERACTION_PILL_REST_MS, S as GAME_FONT_FAMILY, T as GAME_LIT_GOLD, U as MISMATCH_MESSAGE, V as INTERACTION_REST_MS, W as MISMATCH_RATIO_BAR, X as SERVER_MARK_DIAMOND_PATH, Y as ROLE_FLOURISH_PATH, Z as SERVER_MARK_TICK_PATH, _ as GAME_CANVAS_RECT, a as CONSTELLATION_NODE_PLACES, b as GAME_CURSOR, c as COOKING_ARC_RADIUS_X, d as FIXTURE_IMAGE_NAME, et as SETTINGS_RING_WIDTH, f as FIXTURE_VARIANT_SEPARATOR, g as GAME_CANVAS_INSET, h as GAME_BACKDROP_WASH, i as CHECK_MARK_PATH, j as GAME_ROW_PRESS, k as GAME_REPLY_REST, l as COOKING_ZONE_RADIUS_Y, m as GAME_BACKDROP_KEEP, n as ASCENSION_PHASE_COUNT, o as COOKING_ARC_CENTRE_X, p as GAME_BACKDROP_BLUR, q as ORNAMENT_END_PATH, r as BACK_ARROW_PATH, s as COOKING_ARC_CENTRE_Y, t as APPROVE_ENVIRONMENT_VARIABLE, u as DIALOGUE_REPLY_REST, v as GAME_CANVAS_UNIT, w as GAME_INK, x as GAME_DIALOGUE_GOLD, y as GAME_CREAM, z as INTERACTION_PRESS_MS } from "./constants-CLLAons1.js";
+export { APPROVE_ENVIRONMENT_VARIABLE, ASCENSION_PHASE_COUNT, BACK_ARROW_PATH, CHECK_MARK_PATH, CONSTELLATION_NODE_PLACES, COOKING_ARC_CENTRE_X, COOKING_ARC_CENTRE_Y, COOKING_ARC_RADIUS_X, COOKING_ZONE_RADIUS_Y, DIALOGUE_REPLY_REST, FIXTURE_IMAGE_NAME, FIXTURE_VARIANT_SEPARATOR, GAME_BACKDROP_BLUR, GAME_BACKDROP_KEEP, GAME_BACKDROP_WASH, GAME_CANVAS_INSET, GAME_CANVAS_RECT, GAME_CANVAS_UNIT, GAME_CREAM, GAME_CURSOR, GAME_DIALOGUE_GOLD, GAME_FONT_FAMILY, GAME_GOLD, GAME_INK, GAME_LIT_GOLD, GAME_LIT_GOLD_LABEL, GAME_REPLY_HOVER, GAME_REPLY_HOVER_INK, GAME_REPLY_REST, GAME_ROW_HOVER, GAME_ROW_PRESS, GAME_SMOOTHSTEP_EASING, GAME_UNIT, GAME_WHITE, INTERACTION_HOVER_DURATION, INTERACTION_HOVER_MS, INTERACTION_KEY_LABEL, INTERACTION_PILL_REST_MS, INTERACTION_PRESS_MS, INTERACTION_REST_DURATION, INTERACTION_REST_MS, MISMATCH_DETAIL_REGEX, MISMATCH_MESSAGE, MISMATCH_RATIO_BAR, MISSING_IMAGE_MESSAGE, MOBILE_INTERFACE_SCALE, ORNAMENT_END_PATH, ORNAMENT_MIDDLE_PATH, ROLE_FLOURISH_PATH, SERVER_MARK_DIAMOND_PATH, SERVER_MARK_TICK_PATH, SETTINGS_RING_CENTRE, SETTINGS_RING_RADIUS, SETTINGS_RING_WIDTH };

package/dist/constants.js

@@ -63,6 +63,8 @@ const CONSTELLATION_NODE_PLACES = [
 ];
 const INTERACTION_HOVER_MS = 50;
 const INTERACTION_REST_MS = 100;
+const INTERACTION_HOVER_DURATION = `50ms`;
+const INTERACTION_REST_DURATION = `100ms`;
 const INTERACTION_PILL_REST_MS = 200;
 const INTERACTION_PRESS_MS = 167;
 const GAME_SMOOTHSTEP_EASING = "cubic-bezier(0.333, 0, 0.667, 1)";
@@ -71,6 +73,7 @@ const GAME_ROW_PRESS = "rgb(255 255 255 / 0.3)";
 const GAME_REPLY_REST = "rgb(0 0 0 / 0.26)";
 const GAME_REPLY_HOVER = "rgb(255 255 255 / 0.85)";
 const GAME_REPLY_HOVER_INK = "#3b4255";
+const DIALOGUE_REPLY_REST = "rgb(32 40 57 / 0.72)";
 const GAME_LIT_GOLD = "#ffeab4";
 const GAME_LIT_GOLD_LABEL = "#d6cdb8";
 const GAME_DIALOGUE_GOLD = "#ffc700";
@@ -82,4 +85,4 @@ const MISMATCH_RATIO_BAR = .01;
 const MISMATCH_MESSAGE = "Screenshot does not match the stored reference.";
 const MISMATCH_DETAIL_REGEX = /(?<pixels>\d+) pixels \(ratio (?<ratio>[\d.]+)\) differ/u;
 const MISSING_IMAGE_MESSAGE = "No existing reference screenshot found";
-export { APPROVE_ENVIRONMENT_VARIABLE, ASCENSION_PHASE_COUNT, BACK_ARROW_PATH, CHECK_MARK_PATH, CONSTELLATION_NODE_PLACES, COOKING_ARC_CENTRE_X, COOKING_ARC_CENTRE_Y, COOKING_ARC_RADIUS_X, COOKING_ZONE_RADIUS_Y, FIXTURE_IMAGE_NAME, FIXTURE_VARIANT_SEPARATOR, GAME_BACKDROP_BLUR, GAME_BACKDROP_KEEP, GAME_BACKDROP_WASH, GAME_CANVAS_INSET, GAME_CANVAS_RECT, GAME_CANVAS_UNIT, GAME_CREAM, GAME_CURSOR, GAME_DIALOGUE_GOLD, GAME_FONT_FAMILY, GAME_GOLD, GAME_INK, GAME_LIT_GOLD, GAME_LIT_GOLD_LABEL, GAME_REPLY_HOVER, GAME_REPLY_HOVER_INK, GAME_REPLY_REST, GAME_ROW_HOVER, GAME_ROW_PRESS, GAME_SMOOTHSTEP_EASING, GAME_UNIT, GAME_WHITE, INTERACTION_HOVER_MS, INTERACTION_KEY_LABEL, INTERACTION_PILL_REST_MS, INTERACTION_PRESS_MS, INTERACTION_REST_MS, MISMATCH_DETAIL_REGEX, MISMATCH_MESSAGE, MISMATCH_RATIO_BAR, MISSING_IMAGE_MESSAGE, MOBILE_INTERFACE_SCALE, ORNAMENT_END_PATH, ORNAMENT_MIDDLE_PATH, ROLE_FLOURISH_PATH, SERVER_MARK_DIAMOND_PATH, SERVER_MARK_TICK_PATH, SETTINGS_RING_CENTRE, SETTINGS_RING_RADIUS, SETTINGS_RING_WIDTH };
+export { APPROVE_ENVIRONMENT_VARIABLE, ASCENSION_PHASE_COUNT, BACK_ARROW_PATH, CHECK_MARK_PATH, CONSTELLATION_NODE_PLACES, COOKING_ARC_CENTRE_X, COOKING_ARC_CENTRE_Y, COOKING_ARC_RADIUS_X, COOKING_ZONE_RADIUS_Y, DIALOGUE_REPLY_REST, FIXTURE_IMAGE_NAME, FIXTURE_VARIANT_SEPARATOR, GAME_BACKDROP_BLUR, GAME_BACKDROP_KEEP, GAME_BACKDROP_WASH, GAME_CANVAS_INSET, GAME_CANVAS_RECT, GAME_CANVAS_UNIT, GAME_CREAM, GAME_CURSOR, GAME_DIALOGUE_GOLD, GAME_FONT_FAMILY, GAME_GOLD, GAME_INK, GAME_LIT_GOLD, GAME_LIT_GOLD_LABEL, GAME_REPLY_HOVER, GAME_REPLY_HOVER_INK, GAME_REPLY_REST, GAME_ROW_HOVER, GAME_ROW_PRESS, GAME_SMOOTHSTEP_EASING, GAME_UNIT, GAME_WHITE, INTERACTION_HOVER_DURATION, INTERACTION_HOVER_MS, INTERACTION_KEY_LABEL, INTERACTION_PILL_REST_MS, INTERACTION_PRESS_MS, INTERACTION_REST_DURATION, INTERACTION_REST_MS, MISMATCH_DETAIL_REGEX, MISMATCH_MESSAGE, MISMATCH_RATIO_BAR, MISSING_IMAGE_MESSAGE, MOBILE_INTERFACE_SCALE, ORNAMENT_END_PATH, ORNAMENT_MIDDLE_PATH, ROLE_FLOURISH_PATH, SERVER_MARK_DIAMOND_PATH, SERVER_MARK_TICK_PATH, SETTINGS_RING_CENTRE, SETTINGS_RING_RADIUS, SETTINGS_RING_WIDTH };