added updater and fixed fonts

2026-06-12 21:21:45 -05:00
parent ba7a22e0fd
commit 285ba5b3af
24 changed files with 760 additions and 84 deletions
--- a/src/components/asset/ItemPreview.module.css
+++ b/src/components/asset/ItemPreview.module.css
@@ -14,14 +14,14 @@
 }

 .name {
-  font-size: 16px;
+  font-size: 1em;
  color: var(--accent-gold);
  letter-spacing: 0.04em;
 }

 .id {
  font-family: 'JetBrains Mono', monospace;
-  font-size: 12px;
+  font-size: 0.75em;
  color: var(--text-muted);
 }

@@ -42,7 +42,7 @@

 .loading,
 .error {
-  font-size: 13px;
+  font-size: 0.8125em;
  color: var(--text-secondary);
  font-style: italic;
 }
@@ -57,7 +57,7 @@
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
-  font-size: 12px;
+  font-size: 0.75em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
 }
--- a/src/components/asset/StaticBrowser.module.css
+++ b/src/components/asset/StaticBrowser.module.css
@@ -22,13 +22,13 @@

 .id {
  font-family: 'JetBrains Mono', monospace;
-  font-size: 11px;
+  font-size: 0.6875em;
  color: var(--text-muted);
  min-width: 48px;
 }

 .name {
-  font-size: 13px;
+  font-size: 0.8125em;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
@@ -41,7 +41,7 @@
  border: none;
  border-top: 1px solid var(--border);
  color: var(--accent-gold);
-  font-size: 13px;
+  font-size: 0.8125em;
  cursor: pointer;
 }

@@ -52,7 +52,7 @@
 .empty {
  padding: 20px;
  color: var(--text-muted);
-  font-size: 13px;
+  font-size: 0.8125em;
  font-style: italic;
  line-height: 1.6;
 }
--- a/src/components/config/ConfigScreen.module.css
+++ b/src/components/config/ConfigScreen.module.css
@@ -19,13 +19,13 @@
 }

 .title {
-  font-size: 22px;
+  font-size: 1.375em;
  color: var(--accent-gold);
  letter-spacing: 0.06em;
 }

 .subtitle {
-  font-size: 14px;
+  font-size: 0.875em;
  color: var(--text-secondary);
  margin-top: -16px;
 }
@@ -38,7 +38,7 @@

 .label {
  font-family: 'Cinzel', serif;
-  font-size: 12px;
+  font-size: 0.75em;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
@@ -52,7 +52,7 @@
 .pathInput {
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
-  font-size: 12px;
+  font-size: 0.75em;
 }

 .btn {
@@ -60,7 +60,7 @@
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-primary);
-  font-size: 13px;
+  font-size: 0.8125em;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
 }
@@ -104,7 +104,7 @@
  display: flex;
  flex-direction: column;
  gap: 3px;
-  font-size: 12px;
+  font-size: 0.75em;
  font-family: 'JetBrains Mono', monospace;
 }

@@ -126,7 +126,7 @@
  background: var(--accent-red);
  border: 1px solid #b04040;
  padding: 10px;
-  font-size: 13px;
+  font-size: 0.8125em;
  color: #ffd0d0;
 }

@@ -149,7 +149,7 @@

 .sectionLabel {
  font-family: 'Cinzel', serif;
-  font-size: 11px;
+  font-size: 0.6875em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
@@ -163,7 +163,7 @@
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: 'EB Garamond', Georgia, serif;
-  font-size: 14px;
+  font-size: 0.875em;
  border-radius: 3px;
  cursor: pointer;
 }
@@ -185,7 +185,7 @@
  display: flex;
  align-items: center;
  justify-content: center;
-  font-size: 16px;
+  font-size: 1em;
  font-weight: 600;
  padding: 0;
  flex-shrink: 0;
@@ -231,7 +231,7 @@
 .fontSizeLabel {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
-  font-size: 12px;
+  font-size: 0.75em;
  color: var(--text-secondary);
  min-width: 36px;
  text-align: right;
@@ -260,7 +260,7 @@

 .colorHex {
  font-family: 'JetBrains Mono', monospace;
-  font-size: 13px;
+  font-size: 0.8125em;
  color: var(--text-secondary);
  min-width: 64px;
 }
--- a/src/components/flow/FakeDataInputs.module.css
+++ b/src/components/flow/FakeDataInputs.module.css
@@ -4,7 +4,7 @@
 }

 .title {
-  font-size: 10px;
+  font-size: 0.625em;
  color: var(--accent-gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
@@ -12,7 +12,7 @@
 }

 .hint {
-  font-size: 11px;
+  font-size: 0.6875em;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 10px;
@@ -27,12 +27,12 @@

 .label {
  font-family: 'JetBrains Mono', monospace;
-  font-size: 11px;
+  font-size: 0.6875em;
  color: var(--text-secondary);
 }

 .input {
  width: 100%;
-  font-size: 12px;
+  font-size: 0.75em;
  font-family: 'JetBrains Mono', monospace;
 }
--- a/src/components/flow/FlowViewer.module.css
+++ b/src/components/flow/FlowViewer.module.css
@@ -17,7 +17,7 @@

 .methodLabel {
  flex: 1;
-  font-size: 13px;
+  font-size: 0.8125em;
  color: var(--accent-gold);
  letter-spacing: 0.04em;
  overflow: hidden;
@@ -30,7 +30,7 @@
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
-  font-size: 12px;
+  font-size: 0.75em;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
 }
@@ -58,7 +58,7 @@
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
-  font-size: 14px;
+  font-size: 0.875em;
  font-style: italic;
  padding: 40px;
  text-align: center;
@@ -77,12 +77,12 @@
 .errorTitle {
  font-family: 'Cinzel', serif;
  color: #cc6666;
-  font-size: 16px;
+  font-size: 1em;
 }

 .errorMsg {
  font-family: 'JetBrains Mono', monospace;
-  font-size: 12px;
+  font-size: 0.75em;
  color: var(--text-secondary);
  max-width: 500px;
  text-align: center;
@@ -94,6 +94,6 @@
  border: 1px solid var(--border-accent);
  color: var(--accent-gold);
  font-family: 'Cinzel', serif;
-  font-size: 13px;
+  font-size: 0.8125em;
  cursor: pointer;
 }
--- a/src/components/gump/GumpBrowser.module.css
+++ b/src/components/gump/GumpBrowser.module.css
@@ -19,7 +19,7 @@
  border-right: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: 'Cinzel', serif;
-  font-size: 11px;
+  font-size: 0.6875em;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
 }
@@ -52,7 +52,7 @@
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
-  font-size: 10px;
+  font-size: 0.625em;
  padding: 2px 7px;
  border-radius: 3px;
  cursor: pointer;
@@ -73,7 +73,7 @@
 }

 .count {
-  font-size: 10px;
+  font-size: 0.625em;
  color: var(--text-muted);
  padding: 4px 10px;
  flex-shrink: 0;
@@ -110,7 +110,7 @@

 .itemId {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
-  font-size: 10px;
+  font-size: 0.625em;
  color: var(--accent-gold);
  flex-shrink: 0;
  min-width: 48px;
@@ -118,7 +118,7 @@

 .itemName {
  font-family: 'EB Garamond', serif;
-  font-size: 13px;
+  font-size: 0.8125em;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
@@ -127,7 +127,7 @@

 .itemPath {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
-  font-size: 9px;
+  font-size: 0.5625em;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
@@ -139,12 +139,12 @@
  padding: 16px;
  color: var(--text-secondary);
  font-family: 'Cinzel', serif;
-  font-size: 12px;
+  font-size: 0.75em;
 }

 .error {
  padding: 16px;
  color: var(--accent-red);
  font-family: 'JetBrains Mono', monospace;
-  font-size: 11px;
+  font-size: 0.6875em;
 }
--- a/src/components/gump/GumpPreview.module.css
+++ b/src/components/gump/GumpPreview.module.css
@@ -17,13 +17,13 @@

 .name {
  font-family: 'Cinzel', serif;
-  font-size: 16px;
+  font-size: 1em;
  color: var(--text-primary);
 }

 .id {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
-  font-size: 12px;
+  font-size: 0.75em;
  color: var(--accent-gold);
 }

@@ -35,7 +35,7 @@

 .tag {
  font-family: 'Cinzel', serif;
-  font-size: 10px;
+  font-size: 0.625em;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
@@ -57,7 +57,7 @@
 .loading {
  color: var(--text-secondary);
  font-family: 'Cinzel', serif;
-  font-size: 12px;
+  font-size: 0.75em;
  padding: 8px;
 }

@@ -68,7 +68,7 @@
  gap: 6px;
  padding: 16px;
  color: var(--text-muted);
-  font-size: 12px;
+  font-size: 0.75em;
  font-family: 'Cinzel', serif;
 }

@@ -79,6 +79,6 @@

 .meta {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
-  font-size: 11px;
+  font-size: 0.6875em;
  color: var(--text-muted);
 }
--- a/src/components/gump/ScriptGumpDetail.module.css
+++ b/src/components/gump/ScriptGumpDetail.module.css
@@ -14,7 +14,7 @@
 .className {
  display: block;
  font-family: 'Cinzel', serif;
-  font-size: 20px;
+  font-size: 1.25em;
  color: var(--accent-gold-bright);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
@@ -23,7 +23,7 @@
 .friendlyName {
  display: block;
  font-family: 'EB Garamond', serif;
-  font-size: 14px;
+  font-size: 0.875em;
  color: var(--text-secondary);
  font-style: italic;
 }
@@ -45,7 +45,7 @@

 .label {
  font-family: 'Cinzel', serif;
-  font-size: 10px;
+  font-size: 0.625em;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
@@ -53,7 +53,7 @@

 .filepath {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
-  font-size: 12px;
+  font-size: 0.75em;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
@@ -73,14 +73,14 @@
  border: 1px solid var(--border-accent);
  color: var(--accent-gold);
  font-family: 'Cinzel', serif;
-  font-size: 10px;
+  font-size: 0.625em;
  padding: 3px 9px;
  border-radius: 3px;
 }

 .notes {
  font-family: 'EB Garamond', serif;
-  font-size: 14px;
+  font-size: 0.875em;
  color: var(--text-secondary);
  line-height: 1.6;
 }
@@ -92,5 +92,5 @@
  height: 100%;
  color: var(--text-muted);
  font-family: 'Cinzel', serif;
-  font-size: 13px;
+  font-size: 0.8125em;
 }
--- a/src/components/layout/AppShell.module.css
+++ b/src/components/layout/AppShell.module.css
@@ -17,7 +17,7 @@
 }

 .title {
-  font-size: 15px;
+  font-size: 0.9375em;
  color: var(--accent-gold);
  letter-spacing: 0.05em;
 }
@@ -32,7 +32,7 @@
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 4px 10px;
-  font-size: 13px;
+  font-size: 0.8125em;
  font-family: 'Cinzel', serif;
  transition: border-color 0.15s, color 0.15s;
 }
--- a/src/components/layout/AppShell.tsx
+++ b/src/components/layout/AppShell.tsx
@@ -5,6 +5,7 @@ import LeftPanel from './LeftPanel';
 import CenterPanel from './CenterPanel';
 import RightPanel from './RightPanel';
 import ConfigScreen from '../config/ConfigScreen';
+import UpdateChecker from '../update/UpdateChecker';
 import styles from './AppShell.module.css';

 export default function AppShell() {
@@ -46,6 +47,7 @@ export default function AppShell() {
      <header className={styles.header}>
        <span className={`${styles.title} font-cinzel`}>Artificer's Scrollwork</span>
        <div className={styles.headerActions}>
+          <UpdateChecker />
          <button
            className={styles.headerBtn}
            onClick={handleIndexAssets}
--- a/src/components/layout/CenterPanel.module.css
+++ b/src/components/layout/CenterPanel.module.css
@@ -12,7 +12,7 @@
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
-  font-size: 14px;
+  font-size: 0.875em;
  letter-spacing: 0.05em;
 }

--- a/src/components/layout/LeftPanel.module.css
+++ b/src/components/layout/LeftPanel.module.css
@@ -20,7 +20,7 @@
  border: none;
  border-right: 1px solid var(--border);
  color: var(--text-secondary);
-  font-size: 11px;
+  font-size: 0.6875em;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.04em;
  transition: background 0.15s, color 0.15s;
@@ -48,7 +48,7 @@

 .searchInput {
  width: 100%;
-  font-size: 13px;
+  font-size: 0.8125em;
 }

 .content {
@@ -59,6 +59,6 @@
 .placeholder {
  padding: 20px;
  color: var(--text-muted);
-  font-size: 13px;
+  font-size: 0.8125em;
  font-style: italic;
 }
--- a/src/components/layout/RightPanel.module.css
+++ b/src/components/layout/RightPanel.module.css
@@ -14,7 +14,7 @@
 }

 .sectionTitle {
-  font-size: 11px;
+  font-size: 0.6875em;
  color: var(--accent-gold);
  letter-spacing: 0.08em;
  margin-bottom: 10px;
@@ -30,7 +30,7 @@
 .propRow {
  display: flex;
  justify-content: space-between;
-  font-size: 13px;
+  font-size: 0.8125em;
 }

 .propLabel {
@@ -40,11 +40,11 @@
 .propValue {
  color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace;
-  font-size: 12px;
+  font-size: 0.75em;
 }

 .subTitle {
-  font-size: 10px;
+  font-size: 0.625em;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
@@ -53,6 +53,6 @@

 .empty {
  color: var(--text-muted);
-  font-size: 13px;
+  font-size: 0.8125em;
  font-style: italic;
 }
--- a/src/components/script/ClassDetail.module.css
+++ b/src/components/script/ClassDetail.module.css
@@ -19,13 +19,13 @@
 }

 .className {
-  font-size: 18px;
+  font-size: 1.125em;
  color: var(--accent-gold);
  letter-spacing: 0.04em;
 }

 .tag {
-  font-size: 10px;
+  font-size: 0.625em;
  font-family: 'Cinzel', serif;
  padding: 2px 6px;
  border: 1px solid #445;
@@ -48,7 +48,7 @@

 .filePath {
  font-family: 'JetBrains Mono', monospace;
-  font-size: 11px;
+  font-size: 0.6875em;
  color: var(--text-muted);
  margin-top: 4px;
  overflow: hidden;
@@ -62,7 +62,7 @@
 }

 .sectionTitle {
-  font-size: 10px;
+  font-size: 0.625em;
  color: var(--accent-gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
@@ -73,14 +73,14 @@
  display: flex;
  align-items: center;
  gap: 8px;
-  font-size: 13px;
+  font-size: 0.8125em;
  flex-wrap: wrap;
 }

 .chainItem {
  color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace;
-  font-size: 12px;
+  font-size: 0.75em;
 }

 .arrow {
@@ -88,7 +88,7 @@
 }

 .interfaces {
-  font-size: 12px;
+  font-size: 0.75em;
  color: var(--text-secondary);
  margin-top: 6px;
  font-style: italic;
@@ -97,7 +97,7 @@
 .loading {
  padding: 16px;
  color: var(--text-muted);
-  font-size: 13px;
+  font-size: 0.8125em;
  font-style: italic;
 }

@@ -128,7 +128,7 @@
  gap: 6px;
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
-  font-size: 12px;
+  font-size: 0.75em;
 }

 .returnType {
@@ -142,11 +142,11 @@

 .params {
  color: var(--text-secondary);
-  font-size: 11px;
+  font-size: 0.6875em;
 }

 .modBadge {
-  font-size: 10px;
+  font-size: 0.625em;
  font-family: 'Cinzel', serif;
  padding: 1px 5px;
  border: 1px solid var(--border);
--- a/src/components/script/ScriptTree.module.css
+++ b/src/components/script/ScriptTree.module.css
@@ -18,7 +18,7 @@
  text-align: left;
  cursor: pointer;
  color: var(--text-secondary);
-  font-size: 12px;
+  font-size: 0.75em;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.04em;
  transition: background 0.1s, color 0.1s;
@@ -30,7 +30,7 @@
 }

 .nsChevron {
-  font-size: 10px;
+  font-size: 0.625em;
  color: var(--accent-gold);
  min-width: 10px;
 }
@@ -43,7 +43,7 @@
 }

 .nsCount {
-  font-size: 10px;
+  font-size: 0.625em;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
 }
@@ -72,7 +72,7 @@

 .className {
  flex: 1;
-  font-size: 13px;
+  font-size: 0.8125em;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
@@ -80,13 +80,13 @@
 }

 .classNs {
-  font-size: 10px;
+  font-size: 0.625em;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
 }

 .badge {
-  font-size: 9px;
+  font-size: 0.5625em;
  font-family: 'Cinzel', serif;
  padding: 1px 4px;
  border-radius: 2px;
@@ -116,7 +116,7 @@
 .empty {
  padding: 20px;
  color: var(--text-muted);
-  font-size: 13px;
+  font-size: 0.8125em;
  font-style: italic;
  line-height: 1.6;
 }
@@ -124,6 +124,6 @@
 .error {
  padding: 16px;
  color: #ff8080;
-  font-size: 12px;
+  font-size: 0.75em;
  font-family: 'JetBrains Mono', monospace;
 }
--- a/src/components/update/UpdateChecker.module.css
+++ b/src/components/update/UpdateChecker.module.css
@@ -0,0 +1,147 @@
+.checkBtn {
+  padding: 4px 10px;
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+  font-size: 0.8125em;
+  font-family: 'Cinzel', serif;
+  letter-spacing: 0.04em;
+  transition: border-color 0.15s, color 0.15s;
+}
+
+.checkBtn:hover {
+  border-color: var(--border-accent);
+  color: var(--accent-gold);
+}
+
+/* ── Status text ─────────────────────────────────────────────────── */
+
+.status {
+  font-size: 0.75em;
+  font-family: 'Cinzel', serif;
+  color: var(--text-secondary);
+  letter-spacing: 0.04em;
+  padding: 4px 8px;
+}
+
+.ok {
+  color: var(--accent-green, #4a8a4a);
+}
+
+.err {
+  color: var(--accent-red, #8b3a3a);
+  cursor: pointer;
+}
+
+/* ── Download progress ───────────────────────────────────────────── */
+
+.downloadRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 4px 0;
+}
+
+.downloadLabel {
+  font-size: 0.75em;
+  font-family: 'JetBrains Mono', monospace;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  min-width: 160px;
+}
+
+.progressBar {
+  width: 120px;
+  height: 6px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.progressFill {
+  height: 100%;
+  background: var(--accent-gold);
+  transition: width 0.15s ease;
+  border-radius: 3px;
+}
+
+/* ── Update available banner ─────────────────────────────────────── */
+
+.banner {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--border-accent);
+  background: var(--bg-elevated);
+  max-width: 420px;
+}
+
+.bannerRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 10px;
+}
+
+.bannerTitle {
+  font-size: 0.8125em;
+  font-family: 'Cinzel', serif;
+  color: var(--accent-gold-bright);
+  letter-spacing: 0.04em;
+  flex: 1;
+  white-space: nowrap;
+}
+
+.installBtn {
+  padding: 3px 10px;
+  background: var(--accent-gold);
+  border: 1px solid var(--accent-gold);
+  color: var(--bg-base);
+  font-family: 'Cinzel', serif;
+  font-size: 0.75em;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  transition: background 0.15s;
+  white-space: nowrap;
+}
+
+.installBtn:hover {
+  background: var(--accent-gold-bright);
+  border-color: var(--accent-gold-bright);
+}
+
+.toggleBtn,
+.dismissBtn {
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  font-size: 0.75em;
+  padding: 2px 4px;
+  line-height: 1;
+  transition: color 0.15s;
+}
+
+.toggleBtn:hover,
+.dismissBtn:hover {
+  color: var(--accent-gold);
+}
+
+/* ── Release notes dropdown ──────────────────────────────────────── */
+
+.notes {
+  border-top: 1px solid var(--border);
+  padding: 8px 10px;
+  max-height: 140px;
+  overflow-y: auto;
+}
+
+.notesText {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.6875em;
+  color: var(--text-secondary);
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.5;
+  margin: 0;
+}
--- a/src/components/update/UpdateChecker.tsx
+++ b/src/components/update/UpdateChecker.tsx
@@ -0,0 +1,173 @@
+import { useEffect, useRef, useState } from 'react';
+import { invoke } from '@tauri-apps/api/core';
+import { listen } from '@tauri-apps/api/event';
+import styles from './UpdateChecker.module.css';
+
+interface UpdateInfo {
+  available: boolean;
+  latest_version: string;
+  current_version: string;
+  release_notes: string;
+  download_url: string;
+  asset_name: string;
+  asset_size: number;
+}
+
+interface ProgressEvent {
+  downloaded: number;
+  total: number;
+}
+
+type State =
+  | { kind: 'idle' }
+  | { kind: 'checking' }
+  | { kind: 'up_to_date' }
+  | { kind: 'error'; message: string }
+  | { kind: 'available'; info: UpdateInfo }
+  | { kind: 'downloading'; downloaded: number; total: number }
+  | { kind: 'launching' };
+
+function fmtBytes(n: number): string {
+  if (n === 0) return '?';
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(0)} KB`;
+  return `${(n / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+export default function UpdateChecker() {
+  const [state, setState] = useState<State>({ kind: 'idle' });
+  const [expanded, setExpanded] = useState(false);
+  const unlisten = useRef<(() => void) | null>(null);
+
+  useEffect(() => {
+    return () => {
+      unlisten.current?.();
+    };
+  }, []);
+
+  async function handleCheck() {
+    setState({ kind: 'checking' });
+    setExpanded(false);
+    try {
+      const info = await invoke<UpdateInfo>('check_for_update');
+      if (info.available) {
+        setState({ kind: 'available', info });
+        setExpanded(true);
+      } else {
+        setState({ kind: 'up_to_date' });
+        // Auto-clear after 4 s
+        setTimeout(() => setState({ kind: 'idle' }), 4000);
+      }
+    } catch (e) {
+      setState({ kind: 'error', message: String(e) });
+    }
+  }
+
+  async function handleInstall(info: UpdateInfo) {
+    setState({ kind: 'downloading', downloaded: 0, total: info.asset_size });
+
+    // Listen for streaming progress events from Rust
+    unlisten.current?.();
+    unlisten.current = await listen<ProgressEvent>('update-progress', (ev) => {
+      setState({ kind: 'downloading', downloaded: ev.payload.downloaded, total: ev.payload.total });
+    });
+
+    try {
+      await invoke('download_and_install_update', {
+        downloadUrl: info.download_url,
+        assetName: info.asset_name,
+      });
+      unlisten.current?.();
+      setState({ kind: 'launching' });
+    } catch (e) {
+      unlisten.current?.();
+      setState({ kind: 'error', message: String(e) });
+    }
+  }
+
+  // ── Render ──────────────────────────────────────────────────────────────────
+
+  if (state.kind === 'idle') {
+    return (
+      <button className={styles.checkBtn} onClick={handleCheck} title="Check for updates">
+        [Update]
+      </button>
+    );
+  }
+
+  if (state.kind === 'checking') {
+    return <span className={styles.status}>Checking…</span>;
+  }
+
+  if (state.kind === 'up_to_date') {
+    return <span className={`${styles.status} ${styles.ok}`}>✓ Up to date</span>;
+  }
+
+  if (state.kind === 'error') {
+    return (
+      <span
+        className={`${styles.status} ${styles.err}`}
+        title={state.message}
+        onClick={() => setState({ kind: 'idle' })}
+      >
+        ✗ Update error — click to dismiss
+      </span>
+    );
+  }
+
+  if (state.kind === 'launching') {
+    return (
+      <span className={`${styles.status} ${styles.ok}`}>
+        ✓ Installer launched — complete the wizard to finish
+      </span>
+    );
+  }
+
+  if (state.kind === 'downloading') {
+    const pct = state.total > 0 ? Math.round((state.downloaded / state.total) * 100) : 0;
+    return (
+      <div className={styles.downloadRow}>
+        <span className={styles.downloadLabel}>
+          Downloading… {fmtBytes(state.downloaded)}
+          {state.total > 0 ? ` / ${fmtBytes(state.total)}` : ''}
+        </span>
+        <div className={styles.progressBar}>
+          <div className={styles.progressFill} style={{ width: `${pct}%` }} />
+        </div>
+      </div>
+    );
+  }
+
+  // state.kind === 'available'
+  const { info } = state;
+  return (
+    <div className={styles.banner}>
+      <div className={styles.bannerRow}>
+        <span className={styles.bannerTitle}>
+          ✦ v{info.latest_version} available
+        </span>
+        <button className={styles.installBtn} onClick={() => handleInstall(info)}>
+          Install Update
+        </button>
+        <button
+          className={styles.toggleBtn}
+          onClick={() => setExpanded((e) => !e)}
+          title={expanded ? 'Hide notes' : 'Show notes'}
+        >
+          {expanded ? '▴' : '▾'}
+        </button>
+        <button
+          className={styles.dismissBtn}
+          onClick={() => setState({ kind: 'idle' })}
+          title="Dismiss"
+        >
+          ✕
+        </button>
+      </div>
+      {expanded && info.release_notes && (
+        <div className={styles.notes}>
+          <pre className={styles.notesText}>{info.release_notes}</pre>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/src/index.css
+++ b/src/index.css
@@ -70,11 +70,13 @@ body {
 button {
  cursor: pointer;
  font-family: inherit;
+  font-size: inherit;
 }

 /* Input */
 input, textarea, select {
  font-family: inherit;
+  font-size: inherit;
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border);
--- a/src/store/appStore.ts
+++ b/src/store/appStore.ts
@@ -25,11 +25,56 @@ export const DEFAULT_FONT_FAMILY = FONT_FAMILY_OPTIONS[0].value;
 export const DEFAULT_TEXT_COLOR = '#d4c49a';
 export const DEFAULT_FONT_SIZE_INDEX_REAL = 1; // index 1 = 16px

+// ── Color utilities ───────────────────────────────────────────────────────────
+
+function hexToRgb(hex: string): [number, number, number] {
+  const n = parseInt(hex.replace('#', ''), 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+
+function rgbToHex(r: number, g: number, b: number): string {
+  return '#' + [r, g, b]
+    .map((v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, '0'))
+    .join('');
+}
+
+/** Scale each channel by `factor` (0–2). Values above 255 are clamped. */
+function scaleColor(hex: string, factor: number): string {
+  const [r, g, b] = hexToRgb(hex);
+  return rgbToHex(r * factor, g * factor, b * factor);
+}
+
+/**
+ * Derive the full text-color palette from a single primary color.
+ *
+ * Relationships mirror the default palette ratios:
+ *   primary  (#d4c49a) → 1.0×
+ *   accent-gold-bright → ~1.08× (slightly brighter/warmer)
+ *   accent-gold        → ~0.88×
+ *   text-secondary     → ~0.54×
+ *   text-muted         → ~0.29×
+ */
+function deriveColorPalette(primary: string) {
+  return {
+    '--text-primary':        primary,
+    '--accent-gold-bright':  scaleColor(primary, 1.08),
+    '--accent-gold':         scaleColor(primary, 0.88),
+    '--text-secondary':      scaleColor(primary, 0.54),
+    '--text-muted':          scaleColor(primary, 0.29),
+  };
+}
+
 export function applyTypographyVars(fontFamily: string, fontSizeIndex: number, textColor: string) {
  const size = FONT_SIZE_VALUES[fontSizeIndex] ?? 16;
-  document.documentElement.style.setProperty('--font-family-body', fontFamily);
-  document.documentElement.style.setProperty('--font-size-base', `${size}px`);
-  document.documentElement.style.setProperty('--text-primary', textColor);
+  const el = document.documentElement;
+
+  el.style.setProperty('--font-family-body', fontFamily);
+  el.style.setProperty('--font-size-base', `${size}px`);
+
+  const palette = deriveColorPalette(textColor);
+  for (const [prop, val] of Object.entries(palette)) {
+    el.style.setProperty(prop, val);
+  }
 }

 export type LeftPanelTab = 'scripts' | 'statics' | 'mobiles' | 'gumps';