@homebridge-plugins/homebridge-eufy-security 5.0.0-beta.2 → 5.0.0-beta.20

package/homebridge-ui/public/app.css

@@ -274,7 +274,9 @@ h2 {
   padding: 8px 12px;
 }
 
-.diagnostics-actions {
+.diagnostics-actions:not([hidden]) {
+  display: flex;
+  gap: 8px;
   margin-top: 4px;
 }
 
@@ -290,42 +292,25 @@ h2 {
   padding: clamp(16px, 4vw, 24px);
 }
 
-.diagnostics-question,
-.diagnostics-direct,
-.diagnostics-frequency,
-.diagnostics-match {
+.diagnostics-question {
   display: grid;
   gap: 16px;
 }
 
-.diagnostics-question > strong,
-.diagnostics-frequency > strong,
-.diagnostics-match > strong {
-  font-size: clamp(17px, 4vw, 21px);
-  line-height: 1.35;
-  letter-spacing: -0.01em;
-  text-wrap: balance;
-}
-
-.diagnostics-match p {
-  margin-bottom: 0;
-}
-
-.diagnostics-choice-actions {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 8px;
+.diagnostics-question > h3,
+.diagnostics-guidance > h3 {
+  margin: 0;
 }
 
-.diagnostics-choice-actions button {
-  width: 100%;
-  padding-inline: 16px;
+.diagnostics-guidance > h3 {
+  font-size: inherit;
 }
 
-button.diagnostics-secondary-action {
-  border: 1px solid var(--line-strong);
-  background: transparent;
-  color: var(--ink);
+.diagnostics-question > h3 {
+  font-size: clamp(17px, 4vw, 21px);
+  line-height: 1.35;
+  letter-spacing: -0.01em;
+  text-wrap: balance;
 }
 
 button.diagnostics-quiet-action {
@@ -366,55 +351,159 @@ button.diagnostics-quiet-action {
   text-transform: uppercase;
 }
 
-.diagnostics-actions button {
-  width: 100%;
+.diagnostics-actions [data-diagnostics-reproduction] {
+  flex: 1 1 auto;
 }
 
+.diagnostics-result h2,
 .diagnostics-result p {
   margin-bottom: 0;
 }
 
-.diagnostics-privacy {
+.diagnostics-note {
+  margin-bottom: 0;
   color: var(--muted);
   font-size: 12px;
 }
 
-.diagnostics-result {
+.diagnostics-result[open] {
   display: grid;
+  max-width: 560px;
   gap: 8px;
 }
 
-.diagnostics-result a {
-  display: inline-block;
-  margin-top: 8px;
-  color: var(--accent-ink);
+/*
+ * The download is a button because it acts here; the two ways to report are anchors because they navigate to
+ * GitHub, side by side because either one finishes the handoff.
+ */
+.diagnostics-result [data-diagnostics-export],
+.diagnostics-handoff a {
+  display: flex;
+  min-height: 44px;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-control);
+  padding: 8px 12px;
   font-weight: 600;
+  text-align: center;
+  text-decoration: none;
 }
 
-.diagnostics-result button {
-  width: 100%;
+/*
+ * The dialog sits in the top layer, which adds nothing to the page height Homebridge sizes its iframe by, so the
+ * stage keeps room for it rather than leaving it to scroll inside a sliver.
+ */
+.diagnostics-stage:has(> .diagnostics-result[open]) {
+  min-height: 320px;
 }
 
-.diagnostics-manifest {
-  margin-top: 12px;
-  border-block: 1px solid var(--line);
-  padding-block: 8px;
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
+.diagnostics-handoff:not([hidden]) {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  margin-top: 8px;
 }
 
-.diagnostics-manifest ul {
-  margin: 8px 0;
-  padding-left: 20px;
+.diagnostics-handoff [data-diagnostics-issue] {
+  background: var(--accent);
+  color: var(--on-accent);
 }
 
-.diagnostics-review-confirm {
-  display: flex;
-  align-items: flex-start;
+.diagnostics-handoff [data-diagnostics-existing-issue] {
+  border: 1px solid var(--line-strong);
+  color: var(--ink);
+}
+
+.diagnostics-result [data-diagnostics-result-status]:empty {
+  display: none;
+}
+
+.diagnostics-result [data-diagnostics-download-again],
+.diagnostics-result [data-diagnostics-start-another] {
+  justify-self: center;
+}
+
+/*
+ * The opening screen: every area at once, three to a row, each label over its one-line summary.
+ *
+ * Each tile carries a Material Symbols outline glyph (Apache-2.0) as a mask rather than an element. A mask lets
+ * the glyph take the tile's own colour in every state instead of being baked into an image. The data URI is inline, so
+ * the panel renders the same on a host with no route to the internet.
+ */
+.diagnostics-tiles {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 8px;
   margin-top: 12px;
+}
+
+.diagnostics-tiles button {
+  display: flex;
+  min-height: 88px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 10px 6px;
+  border: 1px solid var(--line-strong);
+  background: transparent;
+  color: var(--ink);
   font-size: 12px;
-  cursor: pointer;
+  font-weight: 600;
+  line-height: 1.25;
+  overflow-wrap: break-word;
+  text-align: center;
+}
+
+.diagnostics-tiles button::before {
+  width: 26px;
+  height: 26px;
+  flex: none;
+  background: currentColor;
+  content: '';
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+}
+
+.diagnostics-tiles small {
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 400;
+}
+
+.diagnostics-tiles button:hover:not(:disabled) {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  color: var(--accent-ink);
+}
+
+.diagnostics-tiles [data-diagnostics-tile='startup-authentication']::before {
+  mask-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%20-960%20960%20960%22%3E%3Cpath%20d=%22M480-120v-80h280v-560H480v-80h280q33%200%2056.5%2023.5T840-760v560q0%2033-23.5%2056.5T760-120H480Zm-80-160-55-58%20102-102H120v-80h327L345-622l55-58%20200%20200-200%20200Z%22/%3E%3C/svg%3E');
+}
+
+.diagnostics-tiles [data-diagnostics-tile='device-representation']::before {
+  mask-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%20-960%20960%20960%22%3E%3Cpath%20d=%22M400-560ZM160-160q-33%200-56.5-23.5T80-240v-480q0-33%2023.5-56.5T160-800h640q33%200%2056.5%2023.5T880-720H160v480h80v80h-80Zm640-80v-320H640v320h160Zm-180%2080q-25%200-42.5-17.5T560-220v-360q0-25%2017.5-42.5T620-640h200q25%200%2042.5%2017.5T880-580v360q0%2025-17.5%2042.5T820-160H620Zm100-300q13%200%2021.5-9t8.5-21q0-13-8.5-21.5T720-520q-12%200-21%208.5t-9%2021.5q0%2012%209%2021t21%209ZM340-160l-20-70q-19-17-29.5-40T280-320q0-27%2010.5-50t29.5-40l20-70h120l20%2070q19%2017%2029.5%2040t10.5%2050q0%2027-10.5%2050T480-230l-20%2070H340Zm60-100q26%200%2043-17.5t17-42.5q0-25-18-42.5T400-380q-24%200-42%2017t-18%2043q0%2026%2017%2043t43%2017Zm320-140Z%22/%3E%3C/svg%3E');
+}
+
+.diagnostics-tiles [data-diagnostics-tile='control-state']::before {
+  mask-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%20-960%20960%20960%22%3E%3Cpath%20d=%22M440-120v-240h80v80h320v80H520v80h-80Zm-320-80v-80h240v80H120Zm160-160v-80H120v-80h160v-80h80v240h-80Zm160-80v-80h400v80H440Zm160-160v-240h80v80h160v80H680v80h-80Zm-480-80v-80h400v80H120Z%22/%3E%3C/svg%3E');
+}
+
+.diagnostics-tiles [data-diagnostics-tile='live-media']::before {
+  mask-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%20-960%20960%20960%22%3E%3Cpath%20d=%22M160-160q-33%200-56.5-23.5T80-240v-480q0-33%2023.5-56.5T160-800h480q33%200%2056.5%2023.5T720-720v180l160-160v440L720-420v180q0%2033-23.5%2056.5T640-160H160Zm0-80h480v-480H160v480Zm0%200v-480%20480Z%22/%3E%3C/svg%3E');
+}
+
+.diagnostics-tiles [data-diagnostics-tile='hksv-recording']::before {
+  mask-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%20-960%20960%20960%22%3E%3Cpath%20d=%22m160-800%2080%20160h120l-80-160h80l80%20160h120l-80-160h80l80%20160h120l-80-160h120q33%200%2056.5%2023.5T880-720v480q0%2033-23.5%2056.5T800-160H160q-33%200-56.5-23.5T80-240v-480q0-33%2023.5-56.5T160-800Zm0%20240v320h640v-320H160Zm0%200v320-320Z%22/%3E%3C/svg%3E');
+}
+
+.diagnostics-tiles [data-diagnostics-tile='dashboard-ui']::before {
+  mask-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%20-960%20960%20960%22%3E%3Cpath%20d=%22M520-600v-240h320v240H520ZM120-440v-400h320v400H120Zm400%20320v-400h320v400H520Zm-400%200v-240h320v240H120Zm80-400h160v-240H200v240Zm400%20320h160v-240H600v240Zm0-480h160v-80H600v80ZM200-200h160v-80H200v80Zm160-320Zm240-160Zm0%20240ZM360-280Z%22/%3E%3C/svg%3E');
+}
+
+.diagnostics-tiles [data-diagnostics-tile='other']::before {
+  mask-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%20-960%20960%20960%22%3E%3Cpath%20d=%22M513.5-254.5Q528-269%20528-290t-14.5-35.5Q499-340%20478-340t-35.5%2014.5Q428-311%20428-290t14.5%2035.5Q457-240%20478-240t35.5-14.5ZM442-394h74q0-33%207.5-52t42.5-52q26-26%2041-49.5t15-56.5q0-56-41-86t-97-30q-57%200-92.5%2030T342-618l66%2026q5-18%2022.5-39t53.5-21q32%200%2048%2017.5t16%2038.5q0%2020-12%2037.5T506-526q-44%2039-54%2059t-10%2073Zm38%20314q-83%200-156-31.5T197-197q-54-54-85.5-127T80-480q0-83%2031.5-156T197-763q54-54%20127-85.5T480-880q83%200%20156%2031.5T763-763q54%2054%2085.5%20127T880-480q0%2083-31.5%20156T763-197q-54%2054-127%2085.5T480-80Zm0-80q134%200%20227-93t93-227q0-134-93-227t-227-93q-134%200-227%2093t-93%20227q0%20134%2093%20227t227%2093Zm0-320Z%22/%3E%3C/svg%3E');
 }
 
 .advanced-fields {
@@ -536,6 +625,7 @@ button.diagnostics-quiet-action {
   border: 1px solid var(--line-strong);
   border-radius: var(--radius-control);
   background: var(--panel);
+  color: var(--ink);
   padding: 0;
 }
 
@@ -570,38 +660,84 @@ button.diagnostics-quiet-action {
     transform 150ms var(--ease-out);
 }
 
+.dashboard-action[data-collecting],
+.dashboard-action:has(.diagnostics-name) {
+  width: auto;
+  grid-auto-flow: column;
+  gap: 6px;
+  padding: 0 10px;
+}
+
 .dashboard-action[data-collecting] {
   border-color: var(--accent);
   background: color-mix(in srgb, var(--accent) 16%, var(--panel));
 }
 
+/*
+ * The dashboard's diagnostics action is named in words at rest, and a capture under way replaces that name
+ * beside the icon, so neither rests on the icon or on colour alone.
+ */
+.diagnostics-name,
+.diagnostics-capturing {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.diagnostics-capturing,
+.dashboard-action[data-collecting] .diagnostics-name {
+  display: none;
+}
+
+.dashboard-action[data-collecting] .diagnostics-capturing {
+  display: inline;
+}
+
+/* A problem the dashboard shows: an alert ring, and a dot so the state does not rest on colour alone. */
+.dashboard-action[data-attention] {
+  border-color: var(--alert);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--alert) 24%, transparent);
+}
+
+.dashboard-action[data-attention]::before {
+  content: '';
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  width: 8px;
+  height: 8px;
+  border: 2px solid var(--panel);
+  border-radius: 50%;
+  background: var(--alert);
+}
+
 .dashboard-action:hover::after,
 .dashboard-action:focus-visible::after {
   opacity: 1;
   transform: translateY(0);
 }
 
-/*
- * The way into a diagnostic run, standing where a status pill used to. A pill saying "Connected" was decoration on
- * the healthy path and a dead end on every other; this appears only where a run would explain something.
- */
-.dashboard-diagnose {
-  flex: 0 0 auto;
-  /* Buttons are full width by default here, and this one sits inline beside the title. */
-  width: auto;
-  border: 1px solid var(--alert);
-  border-radius: var(--radius-pill);
-  background: color-mix(in srgb, var(--alert) 16%, var(--panel));
+.blocking-dialog {
+  max-width: 420px;
+  border: 0;
+  border-radius: var(--radius-panel);
+  background: var(--panel);
+  box-shadow: var(--shadow-overlay);
   color: var(--ink);
-  padding: 6px 12px;
-  font: inherit;
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
+  padding: 24px;
+}
+
+.blocking-dialog::backdrop {
+  background: rgb(0 0 0 / 30%);
+  backdrop-filter: blur(5px);
 }
 
-.dashboard-diagnose:hover {
-  background: color-mix(in srgb, var(--alert) 26%, var(--panel));
+.blocking-dialog h2 {
+  margin: 0 0 8px;
+}
+
+.blocking-dialog p {
+  margin: 0 0 20px;
+  color: var(--ink-secondary);
 }
 
 .device-group + .device-group {
@@ -1149,7 +1285,128 @@ button.diagnostics-quiet-action {
   font-weight: 700;
 }
 
-.preference-grid .preference-changed .snapshot-description {
+.preference-grid .preference-changed /*
+ * The guard-mode map: four HomeKit states against nine station modes, one pairing per row.
+ *
+ * A table because the content is one, which also gives each select its own row label without a second element
+ * beside it. Row rules and no box: the panel's own surface encloses it, and the one control in the row is the
+ * select, which carries the only border here.
+ */
+.arming-setting {
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.arming-setting > summary {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 12px;
+  align-items: center;
+  gap: 2px 8px;
+  cursor: pointer;
+}
+
+/* `display: grid` on a summary drops the native marker, so the affordance is drawn back in as a caret. */
+.arming-setting > summary::marker,
+.arming-setting > summary::-webkit-details-marker {
+  content: '';
+  display: none;
+}
+
+.arming-setting > summary::after {
+  content: '';
+  grid-row: 1 / span 2;
+  grid-column: 2;
+  width: 6px;
+  height: 6px;
+  border-right: 1.5px solid var(--muted);
+  border-bottom: 1.5px solid var(--muted);
+  transform: rotate(45deg);
+  transition: transform 140ms var(--ease-out);
+}
+
+.arming-setting[open] > summary::after {
+  transform: rotate(-135deg);
+}
+
+/* The map as one line, which is the answer most households only ever read. */
+.arming-summary {
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 10px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.arming-setting[open] > summary {
+  margin-bottom: 8px;
+}
+
+.arming-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.arming-table thead th {
+  padding: 0 0 6px;
+  border-bottom: 1px solid var(--line-strong);
+  color: var(--muted);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-align: left;
+  text-transform: uppercase;
+}
+
+.arming-table tbody tr + tr th,
+.arming-table tbody tr + tr td {
+  border-top: 1px solid var(--line);
+}
+
+.arming-table th[scope='row'] {
+  width: 38%;
+  padding: 6px 10px 6px 0;
+  color: var(--ink);
+  font-size: 11px;
+  font-weight: 600;
+  text-align: left;
+}
+
+.arming-table th[scope='row'] label {
+  cursor: pointer;
+}
+
+.arming-table td {
+  padding: 6px 0;
+}
+
+.arming-table select {
+  width: 100%;
+  min-height: 28px;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-control);
+  background: var(--panel);
+  color: var(--ink);
+  padding: 2px 6px;
+  font-size: 11px;
+}
+
+/* The changed row carries the weight, so a pending map reads as which pairing moved rather than as a heavier table. */
+.arming-setting .snapshot-help {
+  margin-top: 6px;
+}
+
+.arming-table select.preference-control-changed {
+  border-color: var(--accent);
+  font-weight: 700;
+}
+
+@media (pointer: coarse) {
+  .arming-table select {
+    min-height: 44px;
+  }
+}
+
+.snapshot-description {
   font-weight: 400;
 }
 
@@ -1322,8 +1579,7 @@ button.diagnostics-quiet-action {
   cursor: pointer;
 }
 
-.first-setup-confirmation input,
-.diagnostics-review-confirm input {
+.first-setup-confirmation input {
   appearance: none;
   display: grid;
   place-content: center;
@@ -1338,8 +1594,7 @@ button.diagnostics-quiet-action {
   padding: 0;
 }
 
-.first-setup-confirmation input::before,
-.diagnostics-review-confirm input::before {
+.first-setup-confirmation input::before {
   content: '';
   width: 8px;
   height: 4px;
@@ -1348,14 +1603,12 @@ button.diagnostics-quiet-action {
   transform: rotate(-45deg) scale(0);
 }
 
-.first-setup-confirmation input:checked,
-.diagnostics-review-confirm input:checked {
+.first-setup-confirmation input:checked {
   border-color: var(--accent);
   background: var(--accent);
 }
 
-.first-setup-confirmation input:checked::before,
-.diagnostics-review-confirm input:checked::before {
+.first-setup-confirmation input:checked::before {
   transform: rotate(-45deg) scale(1);
 }
 
@@ -1655,7 +1908,6 @@ button:disabled {
   cursor: not-allowed;
 }
 
-button.diagnostics-secondary-action:hover:not(:disabled),
 .dashboard-page-back:hover:not(:disabled),
 .warm-up-controls button:hover:not(:disabled),
 .warm-up-column button:hover:not(:disabled),
@@ -1687,8 +1939,7 @@ button.diagnostics-quiet-action:hover:not(:disabled) {
 }
 
 .warm-up-controls button:disabled,
-.warm-up-column button:disabled,
-button.diagnostics-secondary-action:disabled {
+.warm-up-column button:disabled {
   border-color: var(--line);
   background: var(--panel);
   color: var(--ink-disabled);
@@ -1734,6 +1985,20 @@ input:focus-visible {
 }
 
 @media (max-width: 420px) {
+  /*
+   * Two across rather than three. Seven areas still fit on one screen at this width, and a third column
+   * leaves each label about ninety pixels, where the longest of them runs to four lines.
+   */
+  .diagnostics-tiles {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  /* The row keeps its three actions on one line by leaving the diagnostics action to its icon. */
+  .diagnostics-name {
+    display: none;
+  }
+
+
   .status-row {
     display: grid;
   }
@@ -1806,14 +2071,14 @@ input:focus-visible {
     width: 100%;
   }
 
-  .diagnostics-choice-actions {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+  /* Two actions side by side leave each a sliver of a label at this width, so they stack. */
+  .diagnostics-handoff:not([hidden]) {
+    grid-template-columns: 1fr;
   }
 
-  .diagnostics-choice-actions button {
-    width: 100%;
-    min-width: 0;
+  .diagnostics-choice-actions {
+    display: grid;
+    gap: 8px;
   }
 
   .device-grid {