waybetter 0.1.1 → 0.7.0

package/dist/shell/store.css

@@ -0,0 +1,250 @@
+/* wayBetter Store view (StoreView.tsx, `.wbs`), install screen and window drop target
+   (InstallDialog.tsx, `.wbi*`). Themed with the framework tokens below; an app maps them to its own
+   theme on `.wbs, .wbi-backdrop, .wbi-drop` (the screen is portaled to <body>). Defaults: a dark
+   neutral look, so the components work before an app themes them.
+
+   Tokens: --wb-text, --wb-text-2, --wb-text-rgb, --wb-muted, --wb-faint, --wb-elevated (screen),
+   --wb-card, --wb-field, --wb-ground (code), --wb-border, --wb-border-soft, --wb-border-strong,
+   --wb-hover, --wb-press, --wb-accent, --wb-accent-rgb, --wb-accent-soft, --wb-accent-ink,
+   --wb-on-accent, --wb-ok, --wb-warn, --wb-font, --wb-font-mono, --wb-shadow-pop, --wb-ring,
+   --wb-t2, --wb-t3, --wb-ease, --wb-ease-out. */
+
+:where(.wbs, .wbi-backdrop, .wbi-drop) {
+  --wb-text: #eef0f7; --wb-text-2: #c3c7d4; --wb-text-rgb: 238 240 247; --wb-muted: #8a90a6; --wb-faint: #5d6379;
+  --wb-elevated: #0d1017; --wb-card: #0d1017; --wb-field: #11141c; --wb-ground: #07080c;
+  --wb-border: #1e2333; --wb-border-soft: #161a26; --wb-border-strong: #2a3044;
+  --wb-hover: rgb(238 240 247 / .06); --wb-press: rgb(238 240 247 / .1);
+  --wb-accent: #1d9bf0; --wb-accent-rgb: 29 155 240; --wb-accent-soft: rgb(29 155 240 / .14); --wb-accent-ink: #cfe6ff; --wb-on-accent: #fff;
+  --wb-ok: #3ecf8e; --wb-warn: #ffb020;
+  /* Status words on any card: the status hue pulled toward the text colour, so green/amber text stays
+     readable on light and silver themes too (a raw #3ecf8e was 1.03:1 on Windows 98 silver). */
+  --wb-ok-ink: color-mix(in oklab, var(--wb-ok) 42%, var(--wb-text)); --wb-warn-ink: color-mix(in oklab, var(--wb-warn) 42%, var(--wb-text));
+  --wb-danger-ink: color-mix(in oklab, #ff5c6c 50%, var(--wb-text));
+  --wb-font: system-ui, sans-serif; --wb-font-mono: ui-monospace, monospace;
+  --wb-shadow-pop: 0 18px 44px -14px rgba(0, 0, 0, .75), 0 3px 10px rgba(0, 0, 0, .35);
+  --wb-ring: 0 0 0 2px rgb(29 155 240 / .6);
+  --wb-t2: 160ms; --wb-t3: 240ms; --wb-ease: ease; --wb-ease-out: cubic-bezier(.2, .8, .2, 1);
+}
+
+/* ---- Install screen ------------------------------------------------------------------------- */
+
+.wbi-backdrop {
+  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 28px 16px;
+  background: rgba(3, 4, 7, .6);
+  animation: wbi-fade var(--wb-t2) var(--wb-ease-out);
+}
+.wbi {
+  width: min(760px, 100%); max-height: min(88vh, 900px); display: flex; flex-direction: column;
+  background: var(--wb-elevated); color: var(--wb-text); border-radius: 16px;
+  box-shadow: var(--wb-shadow-pop), 0 0 0 1px var(--wb-border-strong);
+  font: 400 13px/1.45 var(--wb-font); overflow: hidden;
+  animation: wbi-rise var(--wb-t3) var(--wb-ease-out);
+}
+@keyframes wbi-fade { from { opacity: 0; } }
+@keyframes wbi-rise { from { opacity: 0; transform: translateY(8px) scale(.985); } }
+@media (prefers-reduced-motion: reduce) { .wbi, .wbi-backdrop { animation: none; } }
+
+.wbi-head { display: flex; align-items: flex-start; gap: 14px; padding-block: 20px 14px; padding-inline: 22px 18px; border-bottom: 1px solid var(--wb-border-soft); }
+.wbi-tile {
+  flex: none; width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center;
+  background: var(--wb-accent-soft); color: var(--wb-accent); box-shadow: inset 0 0 0 1px rgb(var(--wb-accent-rgb) / .35);
+}
+.wbi-title { min-width: 0; flex: 1; }
+.wbi-eyebrow { display: block; font: 600 11px/1 var(--wb-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--wb-muted); margin: 3px 0 7px; }
+.wbi-title h2 { margin: 0; font: 700 21px/1.15 var(--wb-font); letter-spacing: -.02em; overflow-wrap: anywhere; }
+.wbi-title p { margin: 5px 0 0; color: var(--wb-text-2); font-size: 13px; }
+.wbi-close { flex: none; }
+
+.wbi-body { overflow-y: auto; padding: 16px 22px 18px; display: grid; gap: 14px; min-height: 0; }
+
+.wbi-source {
+  display: flex; align-items: center; gap: 12px; padding-block: 11px; padding-inline: 14px 12px; border-radius: 12px;
+  background: var(--wb-field); box-shadow: inset 0 0 0 1px var(--wb-border);
+}
+.wbi-source > svg { flex: none; color: var(--wb-muted); }
+.wbi-source.is-store > svg { color: var(--wb-ok-ink); }
+.wbi-source > div { min-width: 0; flex: 1; display: grid; gap: 2px; }
+.wbi-source strong { font-weight: 600; }
+.wbi-source code { font: 12px/1.4 var(--wb-font-mono); color: var(--wb-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.wbi-verified {
+  flex: none; display: inline-flex; align-items: center; gap: 5px; padding-block: 4px; padding-inline: 7px 9px; border-radius: 999px;
+  font: 600 11.5px/1 var(--wb-font); color: var(--wb-ok-ink); background: rgb(62 207 142 / .12); box-shadow: inset 0 0 0 1px rgb(62 207 142 / .35);
+}
+.wbi-desc { margin: 0; color: var(--wb-text-2); }
+
+.wbi-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 16px; margin: 0; }
+.wbi-fact { min-width: 0; }
+.wbi-fact.is-wide { grid-column: 1 / -1; }
+.wbi-fact dt { font: 600 10.5px/1 var(--wb-font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--wb-faint); margin-bottom: 5px; }
+.wbi-fact dd { margin: 0; display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
+.wbi-hash { font: 12px/1.45 var(--wb-font-mono); color: var(--wb-text-2); word-break: break-all; }
+.wbi-copy {
+  flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; border: 0;
+  background: var(--wb-hover); color: var(--wb-muted); cursor: pointer;
+}
+.wbi-copy:hover { background: var(--wb-press); color: var(--wb-text); }
+
+.wbi-perms h3 { margin: 0 0 8px; font: 650 13px/1.2 var(--wb-font); }
+.wbi-perms ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
+.wbi-perms li { display: grid; grid-template-columns: minmax(118px, auto) 1fr; gap: 10px; align-items: baseline; color: var(--wb-text-2); }
+.wbi-chip {
+  justify-self: start; padding: 3px 9px; border-radius: 999px; font: 600 11.5px/1.3 var(--wb-font);
+  background: rgb(var(--wb-text-rgb) / .07); color: var(--wb-text); box-shadow: inset 0 0 0 1px var(--wb-border-strong);
+}
+.wbi-perms li.is-warn .wbi-chip { background: rgb(255 176 32 / .12); color: var(--wb-warn-ink); box-shadow: inset 0 0 0 1px rgb(255 176 32 / .35); }
+.wbi-perms li.is-ok .wbi-chip { background: rgb(62 207 142 / .12); color: var(--wb-ok-ink); box-shadow: inset 0 0 0 1px rgb(62 207 142 / .32); }
+.wbi-note { display: flex; gap: 8px; margin: 10px 0 0; padding: 9px 11px; border-radius: 10px; color: var(--wb-text-2); background: rgb(var(--wb-text-rgb) / .035); font-size: 12.5px; }
+.wbi-note svg { flex: none; margin-top: 2px; color: var(--wb-warn-ink); }
+.wbi-findings { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; color: var(--wb-text-2); }
+.wbi-findings strong { margin-inline-end: 2px; }
+.wbi-findings span { padding: 2px 8px; border-radius: 6px; background: rgb(255 176 32 / .1); color: var(--wb-warn-ink); }
+
+.wbi-theme { display: grid; gap: 8px; }
+.wbi-theme-preview { border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--wb-border); }
+.wbi-warnings { margin: 0; padding-inline-start: 18px; color: var(--wb-warn-ink); font-size: 12.5px; }
+
+.wbi-code { direction: ltr; border-radius: 12px; background: var(--wb-ground); box-shadow: inset 0 0 0 1px var(--wb-border); overflow: hidden; }
+.wbi-code header { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 12px; border-bottom: 1px solid var(--wb-border-soft); font-weight: 600; }
+.wbi-code header small { color: var(--wb-faint); font: 11.5px var(--wb-font-mono); }
+.wbi-code pre { margin: 0; max-height: 280px; overflow: auto; padding: 8px 0; font: 12px/1.55 var(--wb-font-mono); color: var(--wb-text-2); }
+.wbi-code pre:focus-visible { outline: none; box-shadow: var(--wb-ring); }
+.wbi-line { display: block; white-space: pre; padding-right: 14px; } /* rtl-ok: code is always left to right (.wbi-code is dir=ltr) */
+.wbi-line i { display: inline-block; width: 44px; padding-right: 12px; text-align: right; font-style: normal; color: var(--wb-faint); user-select: none; } /* rtl-ok: code line numbers */
+.wbi-more { width: 100%; border: 0; border-top: 1px solid var(--wb-border-soft); padding: 8px; background: transparent; color: var(--wb-accent-ink); font: 600 12px var(--wb-font); cursor: pointer; }
+.wbi-more:hover { background: var(--wb-hover); }
+
+.wbi-foot { display: flex; align-items: center; gap: 10px; padding-block: 12px 14px; padding-inline: 22px 18px; border-top: 1px solid var(--wb-border-soft); background: rgb(var(--wb-text-rgb) / .015); }
+.wbi-foot-end { flex: 1; }
+.wbi-check { display: inline-flex; align-items: center; gap: 8px; color: var(--wb-text-2); cursor: pointer; user-select: none; }
+.wbi-check input { width: 15px; height: 15px; accent-color: var(--wb-accent); }
+.wbi-install { position: relative; min-width: 104px; justify-content: center; overflow: hidden; }
+.wbi-install.is-arming::after {
+  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: rgb(255 255 255 / .7);
+  transform-origin: left; animation: wbi-arm 1s linear forwards;
+}
+@keyframes wbi-arm { from { transform: scaleX(0); } to { transform: scaleX(1); } }
+
+.wbi-state { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 34px 32px 26px; }
+.wbi-state h2 { margin: 6px 0 0; font: 700 19px/1.2 var(--wb-font); letter-spacing: -.015em; }
+.wbi-state p { margin: 0; max-width: 480px; color: var(--wb-text-2); }
+.wbi-state .wbi-muted { color: var(--wb-muted); font-size: 12.5px; }
+.wbi-state-actions { display: flex; gap: 10px; margin-top: 14px; }
+.wbi-state-icon { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; }
+.wbi-state-icon.is-ok { color: var(--wb-ok-ink); background: rgb(62 207 142 / .12); box-shadow: inset 0 0 0 1px rgb(62 207 142 / .35); }
+.wbi-state-icon.is-warn { color: var(--wb-warn-ink); background: rgb(255 176 32 / .12); box-shadow: inset 0 0 0 1px rgb(255 176 32 / .35); }
+.wbi-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgb(var(--wb-text-rgb) / .1); border-top-color: var(--wb-accent); animation: wbi-spin .8s linear infinite; }
+@keyframes wbi-spin { to { transform: rotate(360deg); } }
+
+.wbi-drop {
+  position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 24px; pointer-events: none;
+  background: rgb(var(--wb-accent-rgb) / .1);
+  box-shadow: inset 0 0 0 3px rgb(var(--wb-accent-rgb) / .7);
+}
+.wbi-drop > div {
+  display: grid; justify-items: center; gap: 8px; max-width: 420px; padding: 26px 30px; border-radius: 16px; text-align: center;
+  background: var(--wb-elevated); box-shadow: var(--wb-shadow-pop), 0 0 0 1px var(--wb-border-strong); color: var(--wb-text-2);
+}
+.wbi-drop svg { color: var(--wb-accent); }
+.wbi-drop strong { font: 700 17px/1.2 var(--wb-font); color: var(--wb-text); }
+.wbi-drop code { font: 12px var(--wb-font-mono); color: var(--wb-accent-ink); }
+
+@media (max-width: 560px) {
+  .wbi-perms li { grid-template-columns: 1fr; gap: 3px; }
+  .wbi-head { padding-block: 16px 12px; padding-inline: 16px 12px; }
+  .wbi-body { padding: 14px 16px; }
+  .wbi-foot { flex-wrap: wrap; padding: 12px 16px; }
+}
+
+/* ---- Store view ----------------------------------------------------------------------------- */
+
+.wbs { display: grid; gap: 14px; }
+.wbs-intro { margin: -4px 0 0; color: var(--wb-muted); max-width: 720px; }
+.wbs-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
+.wbs-toolbar > :first-child { flex: 1 1 240px; min-width: 0; }
+.wbs-cats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.wbs-cats button {
+  height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--wb-border); background: transparent;
+  color: var(--wb-text-2); font: 540 12.5px/1 inherit; cursor: pointer; transition: background-color .15s, border-color .15s;
+}
+.wbs-cats button:hover { background: var(--wb-field); }
+.wbs-cats button.is-on { background: var(--wb-accent-soft); border-color: rgb(var(--wb-accent-rgb) / .45); color: var(--wb-text); }
+.wbs-cats-end { flex: 1; }
+.wbs-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--wb-muted); }
+.wbs-status.is-ok svg { color: var(--wb-ok); }
+.wbs-status.is-warn { color: var(--wb-warn-ink); }
+.wbs-updates {
+  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 10px 14px; border-radius: 12px;
+  background: var(--wb-accent-soft); border: 1px solid rgb(var(--wb-accent-rgb) / .35); color: var(--wb-text-2);
+}
+.wbs-updates strong { color: var(--wb-text); }
+
+.wbs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
+.wbs-card {
+  display: flex; flex-direction: column; min-width: 0; border-radius: 14px; overflow: hidden;
+  background: var(--wb-card); border: 1px solid var(--wb-border); transition: border-color .15s, transform .15s var(--wb-ease, ease);
+}
+.wbs-card:hover { border-color: var(--wb-border-strong); }
+.wbs-card.is-skeleton { height: 290px; background: linear-gradient(100deg, var(--wb-card) 30%, var(--wb-field) 50%, var(--wb-card) 70%) 0 0 / 300% 100%; animation: wbs-shimmer 1.4s linear infinite; }
+@keyframes wbs-shimmer { to { background-position: -150% 0; } }
+@media (prefers-reduced-motion: reduce) { .wbs-card.is-skeleton { animation: none; } }
+.wbs-img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--wb-field); border-bottom: 1px solid var(--wb-border-soft); }
+.wbs-swatch { position: relative; display: grid; place-items: center; }
+.wbs-swatch span { position: absolute; left: 22%; right: 22%; top: 16%; bottom: 0; border-radius: 10px 10px 0 0; border: 0 solid; opacity: .95; }
+.wbs-swatch i { position: absolute; left: 30%; width: 34%; top: 32%; height: 8px; border-radius: 4px; opacity: .8; }
+.wbs-swatch b { position: absolute; left: 30%; width: 18%; top: 50%; height: 18px; border-radius: 9px; }
+.wbs-swatch strong { font: 700 42px/1 inherit; color: var(--wb-muted); }
+.wbs-card-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; flex: 1; }
+.wbs-card-body header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.wbs-card-body h3 { margin: 0; font: 650 15px/1.2 inherit; letter-spacing: -.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.wbs-meta { margin: 0; color: var(--wb-muted); font-size: 12px; }
+.wbs-desc { margin: 0; color: var(--wb-text-2); font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+.wbs-perms { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; margin: 2px 0 0; padding: 0; }
+.wbs-perms li { padding: 2px 8px; border-radius: 999px; font-size: 11px; line-height: 1.5; color: var(--wb-text-2); background: rgb(var(--wb-text-rgb) / .06); border: 1px solid var(--wb-border); }
+.wbs-perms li.is-warn { color: var(--wb-warn-ink); border-color: color-mix(in srgb, var(--wb-warn) 40%, transparent); background: color-mix(in srgb, var(--wb-warn) 10%, transparent); }
+.wbs-perms li.is-ok { color: var(--wb-ok-ink); border-color: color-mix(in srgb, var(--wb-ok) 35%, transparent); background: color-mix(in srgb, var(--wb-ok) 9%, transparent); }
+.wbs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; }
+.wbs-state { font-size: 12px; color: var(--wb-muted); margin-inline-end: auto; }
+.wbs-state.is-ok { color: var(--wb-ok-ink); }
+.wbs-foot { margin: 4px 0 0; color: var(--wb-muted); font-size: 12.5px; }
+.wbs-foot code { font-family: var(--wb-font-mono, ui-monospace, monospace); color: var(--wb-text-2); }
+
+/* ---- Default controls (an app usually passes its own) ---------------------------------------- */
+
+.wb-btn {
+  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 9px; cursor: pointer;
+  border: 1px solid var(--wb-border-strong); background: var(--wb-field); color: var(--wb-text); font: 600 12.5px/1 var(--wb-font);
+}
+.wb-btn.is-sm { height: 28px; padding: 0 11px; }
+.wb-btn:hover:not(:disabled) { background: var(--wb-press); }
+.wb-btn:disabled { opacity: .5; cursor: default; }
+.wb-btn.is-primary { background: var(--wb-accent); border-color: transparent; color: var(--wb-on-accent); }
+.wb-btn.is-ghost { background: transparent; border-color: transparent; color: var(--wb-text-2); }
+.wb-btn.is-danger { background: color-mix(in srgb, #f4212e 16%, transparent); border-color: color-mix(in srgb, #f4212e 45%, transparent); color: var(--wb-danger-ink); }
+.wb-icon-btn { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--wb-muted); cursor: pointer; }
+.wb-icon-btn:hover { background: var(--wb-hover); color: var(--wb-text); }
+.wb-field { height: 32px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--wb-border); background: var(--wb-field); color: var(--wb-text); font: 13px var(--wb-font); }
+.wb-segmented { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--wb-field); border: 1px solid var(--wb-border); }
+.wb-segmented button { height: 26px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--wb-text-2); font: 600 12px/1 var(--wb-font); cursor: pointer; }
+.wb-segmented button.is-on { background: var(--wb-accent-soft); color: var(--wb-text); }
+.wb-empty { display: grid; justify-items: center; gap: 8px; padding: 32px 16px; text-align: center; color: var(--wb-text-2); }
+.wb-empty p { margin: 0; max-width: 460px; color: var(--wb-muted); }
+.wb-badge { padding: 2px 8px; border-radius: 999px; font: 600 11px/1.4 var(--wb-font); color: var(--wb-text-2); background: rgb(var(--wb-text-rgb) / .07); }
+
+/* String packs on the install screen: what is ignored or cannot be replaced yet. */
+.wbi-strings-notes { margin: 6px 0 0; padding-left: 18px; color: var(--wb-muted, inherit); font-size: 12.5px; }
+
+/* Icon packs on the install screen: every drawing of the pack, as the shell will draw it. */
+.wbi-pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); gap: 6px; padding: 8px 0 0; }
+.wbi-pack-grid span { display: grid; place-items: center; height: 32px; border-radius: 8px; background: rgb(var(--wb-text-rgb) / .06); color: var(--wb-text); }
+.wbi-pack-grid svg { width: 20px; height: 20px; }
+
+/* The switch of a built-in (area plugin) item in the Store. */
+.wbs-switch { position: relative; display: inline-block; width: 34px; height: 20px; flex: none; cursor: pointer; }
+.wbs-switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
+.wbs-switch span { position: absolute; inset: 0; border-radius: 999px; background: rgb(var(--wb-text-rgb) / .22); transition: background .15s; pointer-events: none; }
+.wbs-switch span::after { content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
+.wbs-switch input:checked + span { background: var(--wb-accent, #1d9bf0); }
+.wbs-switch input:checked + span::after { transform: translateX(14px); }
+.wbs-switch input:focus-visible + span { outline: 2px solid var(--wb-accent, #1d9bf0); outline-offset: 2px; }
+[dir="rtl"] .wbs-switch input:checked + span::after { transform: translateX(-14px); }
+@media (prefers-reduced-motion: reduce) { .wbs-switch span, .wbs-switch span::after { transition: none; } }

package/dist/shell/storeMessages.d.ts

@@ -0,0 +1,193 @@
+export declare const STORE_MESSAGES: {
+    readonly 'wb.permission.storage.label': "Storage";
+    readonly 'wb.permission.storage.detail': "Keeps its own settings in this app (api.storage).";
+    readonly 'wb.permission.ui.label': "Dialogs";
+    readonly 'wb.permission.ui.detail': "Shows dialogs, prompts and notifications (api.ui, api.toast).";
+    readonly 'wb.permission.clipboard.label': "Clipboard";
+    readonly 'wb.permission.clipboard.detail': "Copies text to your clipboard (api.copyText).";
+    readonly 'wb.permission.account.label': "Your account";
+    readonly 'wb.permission.account.detail': "Reads which {site} account is signed in: handle, name, avatar (api.account).";
+    readonly 'wb.permission.commands.label': "Commands";
+    readonly 'wb.permission.commands.detail': "Adds commands to the command palette (Ctrl+K) that run in this page (api.commands).";
+    readonly 'wb.permission.users.label': "Account details";
+    readonly 'wb.permission.users.detail': "Reads what {site}'s own responses said about accounts: verified, follows you (api.users).";
+    readonly 'wb.permission.network.label': "Internet";
+    readonly 'wb.permission.network.detail': "Says it contacts servers on the internet.";
+    readonly 'wb.permission.networkNone.label': "No network";
+    readonly 'wb.permission.networkNone.detail': "Says it never contacts a server; the install check found no network calls in its code.";
+    readonly 'wb.permission.legacy.label': "Legacy · full page access";
+    readonly 'wb.permission.legacy.detail': "No @permissions line: it gets the whole plugin API, like plugins before permissions.";
+    readonly 'wb.permission.none.label': "No special access";
+    readonly 'wb.permission.none.detail': "Only the basic page helpers (CSS, DOM, routes, keys, theme).";
+    readonly 'wb.permission.unknown': "Unknown permission.";
+    readonly 'wb.store.category.reading': "Reading";
+    readonly 'wb.store.category.writing': "Writing";
+    readonly 'wb.store.category.filters': "Filters";
+    readonly 'wb.store.category.focus': "Focus";
+    readonly 'wb.store.category.tools': "Tools";
+    readonly 'wb.store.category.dark': "Dark";
+    readonly 'wb.store.category.light': "Light";
+    readonly 'wb.store.category.icons': "Icons";
+    readonly 'wb.store.builtIn': "Built in";
+    readonly 'wb.store.use': "Use";
+    readonly 'wb.store.install': "Install";
+    readonly 'wb.store.updateTo': "Update to {version}";
+    readonly 'wb.store.modifiedTitle': "The installed file differs from the store's (edited, or from elsewhere). The store leaves it alone.";
+    readonly 'wb.store.modified': "Changed locally";
+    readonly 'wb.store.replace': "Replace";
+    readonly 'wb.store.installed': "Installed";
+    readonly 'wb.store.installedVersion': "Installed · v{version}";
+    readonly 'wb.store.offline': "Offline copy from {when}: {error}";
+    readonly 'wb.store.unreachableShort': "Store unreachable";
+    readonly 'wb.store.verified': "Signed catalog verified · updated {when}";
+    readonly 'wb.store.intro': "Themes and plugins from the wayBetter Store. The catalog is signed; wayBetter checks the signature and every download's SHA-256 before it shows the install screen. Plugins list the permissions they ask for.";
+    readonly 'wb.store.search': "Search the store";
+    readonly 'wb.store.searchPlaceholder': "Search themes and plugins";
+    readonly 'wb.store.kind': "Kind";
+    readonly 'wb.store.themes': "Themes";
+    readonly 'wb.store.checking': "Checking…";
+    readonly 'wb.store.refresh': "Refresh";
+    readonly 'wb.store.categories': "Categories";
+    readonly 'wb.store.everything': "Everything";
+    readonly 'wb.store.updates': "{count, plural, one {# update} other {# updates}} available";
+    readonly 'wb.store.unreachable': "The store is not reachable";
+    readonly 'wb.store.tryAgain': "Try again";
+    readonly 'wb.store.noCatalog': "No catalog yet.";
+    readonly 'wb.store.nothingChanged': "Nothing was installed or changed.";
+    readonly 'wb.store.noMatch': "Nothing matches";
+    readonly 'wb.store.noMatchHint': "Try another word or category.";
+    readonly 'wb.store.plugin': "Plugin";
+    readonly 'wb.store.by': "by {author}";
+    readonly 'wb.store.permissions': "Permissions";
+    readonly 'wb.store.themeNow': "{name} is your theme now.";
+    readonly 'wb.store.foot': "Have a theme or plugin file? Drop it on the wayBetter window, or open a waybetter://install link from waybetter.fyi. You always see this install screen first.";
+    readonly 'wb.install.lines': "{count, plural, one {# line} other {# lines}}";
+    readonly 'wb.install.moreLines': "Show {count, plural, one {# more line} other {# more lines}}";
+    readonly 'wb.install.reinstall': "Reinstall";
+    readonly 'wb.install.update': "Update";
+    readonly 'wb.install.eyebrow.install': "{kind, select, plugin {Install plugin} theme {Install theme} other {Install}}";
+    readonly 'wb.install.eyebrow.update': "{kind, select, plugin {Update plugin} theme {Update theme} other {Update}}";
+    readonly 'wb.install.eyebrow.reinstall': "{kind, select, plugin {Reinstall plugin} theme {Reinstall theme} other {Reinstall}}";
+    readonly 'wb.install.noAuthor': "No author or version given";
+    readonly 'wb.install.verified': "Verified";
+    readonly 'wb.install.installedNow': "Installed now";
+    readonly 'wb.install.identical': "v{version} (identical)";
+    readonly 'wb.install.on': "on";
+    readonly 'wb.install.replaces': "Replaces";
+    readonly 'wb.install.replacesValue': "your copy of this theme";
+    readonly 'wb.install.copyHash': "Copy SHA-256";
+    readonly 'wb.install.permissions': "Permissions it declares";
+    readonly 'wb.install.pageAccess': "Plugins run inside {site} with the same access as the page: they can read what {site} shows you and act in it. Permissions limit what the wayBetter API gives a plugin, not the page. Install only code you trust.";
+    readonly 'wb.install.theCode': "The code";
+    readonly 'wb.install.themeCss': "Theme CSS (runs in {site} like your Custom CSS)";
+    readonly 'wb.install.code': "Code that will be installed";
+    readonly 'wb.install.staysOn': "It stays on";
+    readonly 'wb.install.turnOn': "Turn it on now";
+    readonly 'wb.install.useNow': "Use it now";
+    readonly 'wb.install.installing': "Installing…";
+    readonly 'wb.install.done': "{name} is installed";
+    readonly 'wb.install.done.pluginOn': "It is running in your {site} tabs now. Turn it off any time in Plugins.";
+    readonly 'wb.install.done.pluginOff': "It is off. Turn it on in Plugins when you want it.";
+    readonly 'wb.install.done.themeOn': "It is your theme now. Switch back any time in Appearance.";
+    readonly 'wb.install.done.themeOff': "It is in your themes in Appearance.";
+    readonly 'wb.install.done.fonts': "It names Google fonts ({fonts}). Appearance can download them for you; until then it uses its fallback fonts.";
+    readonly 'wb.install.openPlugins': "Open Plugins";
+    readonly 'wb.install.openAppearance': "Open Appearance";
+    readonly 'wb.install.eyebrow.strings.install': "Install string pack";
+    readonly 'wb.install.eyebrow.strings.update': "Update string pack";
+    readonly 'wb.install.eyebrow.strings.reinstall': "Reinstall string pack";
+    readonly 'wb.install.err.stringsLarge': "String packs are limited to 2 MB.";
+    readonly 'wb.install.err.stringsNotInstalled': "The string pack was not installed";
+    readonly 'wb.install.license': "Licence";
+    readonly 'wb.install.credits': "Credits";
+    readonly 'wb.install.strings.dataOnly': "Data only: text that replaces {site}’s own words. No code and no styles; nothing in it runs. Words it does not change stay as {site} shows them.";
+    readonly 'wb.install.strings.language': "Language";
+    readonly 'wb.install.strings.count': "{count, plural, one {# string} other {# strings}}";
+    readonly 'wb.install.strings.coverage': "Coverage";
+    readonly 'wb.install.strings.coverageValue': "{translated} of {translatable} of {site}’s strings ({percent})";
+    readonly 'wb.install.strings.closed': "{count, plural, one {# more string of {site} cannot be replaced by a pack yet (rich text, number formats)} other {# more strings of {site} cannot be replaced by a pack yet (rich text, number formats)}}";
+    readonly 'wb.install.strings.unknown': "{count, plural, one {# key {site} does not have is ignored} other {# keys {site} does not have are ignored}}";
+    readonly 'wb.install.strings.refused': "{count, plural, one {# string does not fit {site}’s own and is not used} other {# strings do not fit {site}’s own and are not used}}";
+    readonly 'wb.install.strings.otherCatalog': "This pack is for another version of {site} (a different set of strings); it would change nothing here.";
+    readonly 'wb.install.strings.sample': "A sample";
+    readonly 'wb.install.strings.file': "The pack file";
+    readonly 'wb.install.done.stringsOn': "Your {site} tabs reload to show it. Turn it off any time in Languages.";
+    readonly 'wb.install.done.stringsOff': "It is off. Turn it on in Languages when you want it.";
+    readonly 'wb.install.openStrings': "Open Languages";
+    readonly 'wb.store.strings': "Languages";
+    readonly 'wb.store.stringsItem': "String pack";
+    readonly 'wb.install.eyebrow.icons.install': "Install icon pack";
+    readonly 'wb.install.eyebrow.icons.update': "Update icon pack";
+    readonly 'wb.install.eyebrow.icons.reinstall': "Reinstall icon pack";
+    readonly 'wb.install.err.icons': "This icon pack cannot be installed";
+    readonly 'wb.install.err.iconsNone': "{site} cannot install icon packs here.";
+    readonly 'wb.install.err.iconsLarge': "Icon packs are limited to 120 KB.";
+    readonly 'wb.install.err.iconsNotInstalled': "The icon pack was not installed";
+    readonly 'wb.install.err.opened': "This file cannot be installed";
+    readonly 'wb.install.icons.dataOnly': "Data only: drawings as path data and small pictures. No code and no styles; nothing in it runs.";
+    readonly 'wb.install.icons.license': "License";
+    readonly 'wb.install.icons.source': "Drawings from";
+    readonly 'wb.install.icons.count': "Icons";
+    readonly 'wb.install.icons.countValue': "{count, plural, one {# icon} other {# icons}}";
+    readonly 'wb.install.icons.file': "The pack file";
+    readonly 'wb.install.done.iconsOn': "It is your icon pack now. Switch back any time in Appearance.";
+    readonly 'wb.install.done.iconsOff': "It is in your icon packs in Appearance.";
+    readonly 'wb.store.icons': "Icons";
+    readonly 'wb.store.iconsItem': "Icon pack";
+    readonly 'wb.store.builtinTab': "Built in";
+    readonly 'wb.store.builtinItem': "Built in";
+    readonly 'wb.store.areaSwitch': "Turn {name} on or off";
+    readonly 'wb.store.areaOn': "On";
+    readonly 'wb.store.areaOff': "Off";
+    readonly 'wb.strings.section': "Languages";
+    readonly 'wb.strings.title': "String packs";
+    readonly 'wb.strings.intro': "A string pack replaces {site}’s own words with text: a language {site} does not offer, a better translation, or your own wording. Packs apply in this order; a later one wins where two change the same word. Words no pack changes stay exactly as {site} shows them.";
+    readonly 'wb.strings.empty': "No string packs yet";
+    readonly 'wb.strings.emptyHint': "Get one from the Store, or drop a .strings.json file on the window.";
+    readonly 'wb.strings.openStore': "Open the Store";
+    readonly 'wb.strings.by': "by {authors}";
+    readonly 'wb.strings.on': "Use {name}";
+    readonly 'wb.strings.up': "Move up";
+    readonly 'wb.strings.down': "Move down";
+    readonly 'wb.strings.remove': "Remove";
+    readonly 'wb.strings.removed': "{name} is removed.";
+    readonly 'wb.strings.applied': "Your {site} tabs reload to apply it.";
+    readonly 'wb.strings.limit': "At most 8 packs can be on at once.";
+    readonly 'wb.strings.dataOnly': "Data only";
+    readonly 'wb.strings.translate': "Translate mode";
+    readonly 'wb.strings.translateHint': "Every {site} tab shows a bar: click a word to change it. Your edits apply in that tab after a reload, and “Copy pack file” gives you a pack to share. While it is on, words carry invisible markers.";
+    readonly 'wb.install.doneButton': "Done";
+    readonly 'wb.install.drop': "Drop to install";
+    readonly 'wb.install.dropHint': "A theme (.json), a plugin (.plugin.js) or a string pack (.strings.json). You will see what it is before anything is installed.";
+    readonly 'wb.install.err.theme': "This theme cannot be installed";
+    readonly 'wb.install.stage.link': "{kind, select, plugin {Install plugin from {host}} theme {Install theme from {host}} other {Install from {host}}}";
+    readonly 'wb.install.stage.linkDetail': "Downloading and checking…";
+    readonly 'wb.install.err.kind': "“{file}” is not a theme, a plugin or a string pack";
+    readonly 'wb.install.err.kindHint': "wayBetter installs themes (.json), plugins (.plugin.js) and string packs (.strings.json). To attach a file to a post, drop it on {site}’s composer instead.";
+    readonly 'wb.install.err.large': "“{file}” is too large";
+    readonly 'wb.install.err.largeHint': "{kind, select, theme {Themes are limited to 2 MB.} other {Plugins are limited to 2 MB.}}";
+    readonly 'wb.install.stage.named': "Install {name}";
+    readonly 'wb.install.stage.fileDetail': "Checking the file…";
+    readonly 'wb.install.stage.storeDetail': "Downloading from the wayBetter Store and checking its signature…";
+    readonly 'wb.install.err.link': "This install link cannot be used";
+    readonly 'wb.install.err.notInstalled': "{kind, select, theme {The theme was not installed} other {The plugin was not installed}}";
+    readonly 'wb.install.untitled': "Untitled";
+    readonly 'wb.install.file': "File";
+    readonly 'wb.install.size': "Size";
+    readonly 'wb.install.themeFile': "Theme file";
+    readonly 'wb.store.all': "All";
+    readonly 'wb.store.pluginsTab': "Plugins";
+    readonly 'wb.store.theme': "Theme";
+    readonly 'wb.store.remove': "Remove";
+    readonly 'wb.store.keep': "Keep";
+    readonly 'wb.store.removed': "{name} removed.";
+    readonly 'wb.install.cancel': "Cancel";
+    readonly 'wb.install.close': "Close";
+    readonly 'wb.install.source.store': "wayBetter Store (signed catalog, sha256 verified)";
+    readonly 'wb.install.source.link': "Link: {host}";
+    readonly 'wb.install.source.file': "A file you dropped";
+};
+export type StoreKey = keyof typeof STORE_MESSAGES;
+export type StoreParams = Readonly<Record<string, string | number>>;
+/** The app's translator for these keys (framework catalogs merged in): the formatted message. */
+export type StoreText = (key: StoreKey, params?: StoreParams) => string;