genshin-interface 4.3.3 → 4.5.0

package/dist/styles/artifactStats.css

@@ -0,0 +1,21 @@
+/* The attribute rows the panel's totals and a picked piece's stats draw alike. Each list sets its own top */
+.totals,
+.stats {
+  position: absolute;
+  right: 0;
+  left: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.total,
+.stat {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: calc(var(--unit) * 35.6);
+  padding: 0 calc(var(--unit) * 2) 0 calc(var(--unit) * 28);
+  font-size: calc(var(--unit) * 26);
+  font-weight: 600;
+}

package/dist/styles/creamDiscPress.css

@@ -0,0 +1,8 @@
+/* A cream disc's press, at once: the disc tinted slate with its mark cream. Provisional: no reference frame shows a close
+   or a disc under the pointer, so the press is the cream pill's own. The cream is `GAME_CREAM`, restated because this
+   sheet is plain CSS. It is worn by the close and the disc button, which pull `ringButton.css` for the rest */
+.cream-disc-press:enabled:is(:active, [data-pressed], [data-interaction-state="Pressed"] *) {
+  --state-duration: 0s;
+  background-color: rgb(73 83 103 / 0.5);
+  color: #ece5d8;
+}

package/dist/styles/creamPill.css

@@ -0,0 +1,9 @@
+/* The cream pill a label is set in: the game's cream at nine tenths and its ink words, with the box and place
+   left to the label that wears it */
+.cream-pill {
+  border-radius: calc(var(--unit) * 25);
+  background: rgb(236 229 216 / 0.9);
+  color: #3b4255;
+  font-size: calc(var(--unit) * 26);
+  font-weight: 600;
+}

package/dist/styles/creamPillButton.css

@@ -0,0 +1,39 @@
+/* A cream pill button, lit as the game's cream pill is without its bevel, which these pills never drew: a white ring
+   1 unit outside its edge and 2 within on a pointer's hover (only a pointer's, so a tap leaves none), and on focus or
+   the forced hover, holding its size. Pressed, its cream gives way to the slate and gold light the pill takes at once.
+   Provisional past the ring, as no recording shows these pills under the pointer */
+.cream-pill-button {
+  --cream-pill-button-lit-shadow:
+    0 0 0 calc(var(--unit) * 1) #fff, inset 0 0 0 calc(var(--unit) * 2) #fff,
+    0 0 calc(var(--unit) * 7) rgb(255 255 255 / 0.125);
+}
+
+@media (hover: hover) {
+  .cream-pill-button:enabled:hover {
+    box-shadow: var(--cream-pill-button-lit-shadow);
+  }
+}
+
+.cream-pill-button:enabled:is(:focus-visible, [data-interaction-state="Hover"] *) {
+  box-shadow: var(--cream-pill-button-lit-shadow);
+}
+
+.cream-pill-button::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  border: calc(var(--unit) * 2) solid rgb(73 83 103 / 0.5);
+  border-radius: inherit;
+  background-color: rgb(255 243 183 / 0.5);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.cream-pill-button:enabled:is(:active, [data-pressed], [data-interaction-state="Pressed"] *) {
+  background-color: transparent;
+}
+
+.cream-pill-button:enabled:is(:active, [data-pressed], [data-interaction-state="Pressed"] *)::before {
+  opacity: 1;
+}

package/dist/styles/creamPillLit.css

@@ -0,0 +1,18 @@
+/* The lit rim of a cream pill control, the game's Pill as it is lit: a white ring a unit over its edge and two within.
+   It shows on hover and focus, with no browser outline. Provisional, as no recording shows an inventory pill lit.
+   The rim is the Pill's, measured on a dialog's Confirm. */
+.cream-pill-lit {
+  --cream-pill-lit-shadow: 0 0 0 calc(var(--unit) * 1) #fff, inset 0 0 0 calc(var(--unit) * 2) #fff;
+}
+
+.cream-pill-lit:enabled:is(:focus-visible, [data-interaction-state="Hover"] *) {
+  outline: none;
+  box-shadow: var(--cream-pill-lit-shadow);
+}
+
+@media (hover: hover) {
+  .cream-pill-lit:enabled:hover {
+    outline: none;
+    box-shadow: var(--cream-pill-lit-shadow);
+  }
+}

package/dist/styles/fillTint.css

@@ -0,0 +1,21 @@
+/* A fill tint: the element's box takes `--row-tint` behind its words, lit as a list row is, by focus, by the forced
+   Hover state or by a pointer's hover. The first two draw the tint unguarded, and a pointer's hover is guarded by
+   `(hover: hover)`, so a touch screen leaves no tint after a tap. The element wears the `fill-tint` class and sets
+   `--row-tint`, `--hover-duration` and `--rest-duration` on its own base rule. Its press is its own, in a block placed
+   after this sheet. Worn by the artifact picker's options and the character screen's tabs */
+.fill-tint {
+  --state-duration: var(--rest-duration);
+  transition: background-color var(--state-duration);
+}
+
+.fill-tint:is(:focus-visible, [data-interaction-state="Hover"] *) {
+  --state-duration: var(--hover-duration);
+  background-color: var(--row-tint);
+}
+
+@media (hover: hover) {
+  .fill-tint:hover {
+    --state-duration: var(--hover-duration);
+    background-color: var(--row-tint);
+  }
+}

package/dist/styles/footDisc.css

@@ -0,0 +1,9 @@
+/* The round 50 unit buttons along a screen's foot, each placed and filled by its own rule */
+.foot-disc {
+  position: absolute;
+  width: calc(var(--unit) * 50);
+  height: calc(var(--unit) * 50);
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+}

package/dist/styles/forgeDetail.css

@@ -0,0 +1,30 @@
+/* The detail pane's frame and the children it places: each direct child of the pane is absolute, pointer-events auto, with no
+   margin, so every pane that is a child of it pulls this sheet in to draw its own */
+.detail {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.detail > * {
+  pointer-events: auto;
+  position: absolute;
+  margin: 0;
+}
+/* The game's label sits right of its icon, which is not drawn, so the padding pushes the label along by half of itself */
+.action {
+  box-sizing: border-box;
+  top: calc(var(--unit) * 963);
+  left: calc(var(--unit) * 1883);
+  width: calc(var(--unit) * 277);
+  height: calc(var(--unit) * 78);
+  padding-left: calc(var(--unit) * 39);
+  border: none;
+  border-radius: calc(var(--unit) * 39);
+  background: #ece5d8;
+  color: #3b3b3b;
+  font-size: calc(var(--unit) * 36);
+  letter-spacing: calc(var(--unit) * 2.9);
+}

package/dist/styles/gradientTint.css

@@ -0,0 +1,17 @@
+/* A gradient tint: a flat gradient laid over the element's own fill in its background image, lit as a row is, by a
+   pointer's hover, by focus or by the forced Hover state, and pressed at once. A pointer's hover is guarded by
+   `(hover: hover)`, so a touch screen leaves no tint after a tap. The element wears the `gradient-tint` class and sets
+   `--tint-hover` and `--tint-press` on its own base rule */
+@media (hover: hover) {
+  .gradient-tint:enabled:hover {
+    background-image: linear-gradient(var(--tint-hover), var(--tint-hover));
+  }
+}
+
+.gradient-tint:enabled:is(:focus-visible, [data-interaction-state="Hover"] *) {
+  background-image: linear-gradient(var(--tint-hover), var(--tint-hover));
+}
+
+.gradient-tint:enabled:is(:active, [data-pressed], [data-interaction-state="Pressed"] *) {
+  background-image: linear-gradient(var(--tint-press), var(--tint-press));
+}

package/dist/styles/ringButton.css

@@ -0,0 +1,27 @@
+/* A button a white ring lights round when it is hovered or focused, its crossfade the button's own `--hover-duration`.
+   The keyboard's focus and the forced Hover state draw the ring unguarded, and a pointer's hover is guarded by
+   `(hover: hover)`, so a touch screen leaves nothing lit after a tap. The ring has no `:enabled`, so a button's enabled
+   Press outranks it at equal specificity; a Press without `:enabled` does so only when its own block comes after this
+   sheet. The transition lists `filter` too, for the brightness a press sets: a transition on a property that never
+   changes draws nothing, so the close, the disc and the tip, which never change `filter`, are unaffected.
+   Provisional: no reference frame shows a close, a disc or a tip's button under the Pointer, so these states are
+   the cream pill's own */
+.ring-button {
+  transition:
+    background-color var(--state-duration),
+    color var(--state-duration),
+    filter var(--state-duration),
+    outline-color var(--state-duration);
+}
+
+.ring-button:is(:focus-visible, [data-interaction-state="Hover"] *) {
+  --state-duration: var(--hover-duration);
+  outline-color: #fff;
+}
+
+@media (hover: hover) {
+  .ring-button:hover {
+    --state-duration: var(--hover-duration);
+    outline-color: #fff;
+  }
+}

package/dist/styles/rowTint.css

@@ -0,0 +1,33 @@
+/* A row's tint: a box laid over the row behind its words, lit as a row is when it is hovered or focused, and pressed at
+   Once. The row wears the `row-tint` class and sets the tint's colours as `--row-tint` and `--row-press` */
+.row-tint {
+  isolation: isolate;
+}
+
+.row-tint::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  border-radius: inherit;
+  background-color: var(--row-tint);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--state-duration);
+}
+
+.row-tint:enabled:is(:focus-visible, [data-interaction-state="Hover"] *)::before {
+  opacity: 1;
+}
+
+/* A pointer's hover is guarded by `(hover: hover)`, so a touch screen leaves no tint after a tap */
+@media (hover: hover) {
+  .row-tint:enabled:hover::before {
+    opacity: 1;
+  }
+}
+
+.row-tint:enabled:is(:active, [data-pressed], [data-interaction-state="Pressed"] *)::before {
+  background-color: var(--row-press);
+  opacity: 1;
+}

package/dist/styles/shopScreen.css

@@ -0,0 +1,31 @@
+/* The pieces the shop's grid and its list draw alike. Each screen sets its own position, size and line height */
+.amount::-webkit-slider-runnable-track {
+  background: #9aa3b8;
+}
+
+.amount::-webkit-slider-thumb {
+  background: #2b2a26;
+}
+
+.cross {
+  width: calc(var(--unit) * 24);
+  height: calc(var(--unit) * 24);
+  fill: none;
+  stroke: currentcolor;
+  stroke-linecap: round;
+  stroke-width: 3;
+}
+
+.price-icon {
+  width: calc(var(--unit) * 18);
+  height: calc(var(--unit) * 18);
+  background: #7aa9e8;
+  transform: rotate(45deg);
+}
+
+.price-line {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--unit) * 10);
+  font-size: calc(var(--unit) * 24);
+}

package/dist/styles/sparkle.css

@@ -0,0 +1,6 @@
+/* The sparkle the game marks its Wish and its banner's rate-up with, a four-point star in its own colour. Its size and colour
+   are each piece's own, so the base is all a sparkle shares */
+.sparkle {
+  position: absolute;
+  clip-path: var(--sparkle-clip-path);
+}

package/dist/styles/translucentButton.css

@@ -0,0 +1,9 @@
+/* A button's translucent box, its words in the colour and font around it, its place left to the button */
+.translucent-button {
+  padding: calc(var(--unit) * 10) calc(var(--unit) * 20);
+  border: none;
+  border-radius: calc(var(--unit) * 8);
+  background: rgb(255 255 255 / 0.14);
+  color: inherit;
+  font: inherit;
+}

package/dist/styles/visuallyHidden.css

@@ -0,0 +1,11 @@
+/* The words a screen reader reads and no eye sees: each keeps its place in the page at one pixel square and clipped to
+   nothing, under the class that carries it (a tab's name, a level's achieved word, a dialogue's whole line) */
+.tab-name,
+.hidden-label,
+.spoken {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+}

package/dist/styles/weaponStars.css

@@ -1,9 +1,6 @@
-/* The six ascension phases, each a small star the phases reached light */
+/* The six ascension phases, each a glint the phases reached light; the level that holds them sets its size and shape */
 .spark {
-  width: calc(var(--unit) * 14);
-  height: calc(var(--unit) * 14);
   background: rgb(255 255 255 / 0.3);
-  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%, 50% 0%);
 }
 
 .spark.lit {

package/dist/styles/wishOverlay.css

@@ -26,13 +26,15 @@
   font-size: calc(var(--unit) * 28);
 }
 
+/* The close is the game's flag: a gold tab with its far side notched in, the cross cream in it, measured off the Details
+   popup at 1440 high (references/wish-details-1.png). The popup's own place is provisional, so the flag is set inside
+   the panel's corner */
 .close {
   position: absolute;
   top: calc(var(--unit) * 24);
   right: calc(var(--unit) * 24);
-  padding: 0;
-  border: none;
-  background: none;
-  color: inherit;
-  font: inherit;
+  border-radius: 0;
+  background: #a9783d;
+  clip-path: polygon(0 0, 100% 0, 88% 50%, 100% 100%, 0 100%);
+  color: #e6cfaa;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "genshin-interface",
-  "version": "4.3.3",
+  "version": "4.5.0",
   "description": "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.",
   "keywords": [
     "component-library",
@@ -33,6 +33,7 @@
   "exports": {
     ".": "./dist/index.js",
     "./constants": "./dist/constants.js",
+    "./getFixtureImageName": "./dist/getFixtureImageName.js",
     "./save": "./dist/save.js",
     "./package.json": "./package.json",
     "./style.css": "./dist/style.css",
@@ -47,21 +48,21 @@
     "lint:fix": "eslint --fix .",
     "test": "vitest",
     "test:visual": "vitest --config vitest.browser.config.ts",
-    "typecheck": "vue-tsc"
+    "typecheck": "tsrs --fast --runExternalCode"
   },
   "devDependencies": {
-    "@esposter/configuration": "4.3.3",
+    "@esposter/configuration": "4.5.0",
     "@fontsource/signika": "^5.3.0",
-    "@tsdown/css": "^0.23.1",
-    "@types/node": "^26.6.5",
-    "tsdown": "^0.23.1",
+    "@tsdown/css": "^0.23.5",
+    "@types/node": "^26.6.6",
+    "tsdown": "^0.23.5",
     "vite": "^8.3.5",
-    "vitest": "^5.0.5",
+    "vitest": "^5.1.0",
     "vitest-browser-vue": "^3.1.0",
     "vue-tsc": "3.3.11"
   },
   "peerDependencies": {
     "vue": "^3.5.44"
   },
-  "gitHead": "955bbc130ad9b28877fd4ae8efc73a045141ce01"
+  "gitHead": "e30c001f3b4b15693e75fb53092d62a97ade4d2b"
 }

package/dist/styles/blessingWorship.css

@@ -1,50 +0,0 @@
-/* The screen's colours and placement are provisional until the recording shows them */
-.blessing-screen,
-.worship-screen {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  background: rgb(20 18 16 / 55%);
-  color: rgb(245 240 230);
-}
-
-.title {
-  position: absolute;
-  top: 6%;
-  left: 6%;
-  font-size: 2rem;
-}
-
-.close {
-  position: absolute;
-  top: 6%;
-  right: 6%;
-  font-size: 2rem;
-}
-
-.blessing,
-.worship {
-  position: absolute;
-  top: 6%;
-  right: 16%;
-  font-size: 1.25rem;
-}
-
-.held,
-.pool {
-  position: absolute;
-  top: 16%;
-  left: 6%;
-  font-size: 1.25rem;
-}
-
-.levels,
-.members {
-  position: absolute;
-  top: 26%;
-  left: 6%;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}

package/dist/styles/partyReputation.css

@@ -1,24 +0,0 @@
-/* The head, title and back control the party setup and reputation screens share */
-.head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: calc(var(--unit) * 20) calc(var(--unit) * 40);
-}
-
-.title {
-  margin: 0;
-  font-size: calc(var(--unit) * 24);
-}
-
-.back,
-.step {
-  width: calc(var(--unit) * 56);
-  height: calc(var(--unit) * 56);
-  border: none;
-  border-radius: 50%;
-  background: rgb(255 255 255 / 0.15);
-  color: #ece5d8;
-  font: inherit;
-  font-size: calc(var(--unit) * 28);
-}