From 2dce270ac71e821d747657d068ffa134b397cf63 Mon Sep 17 00:00:00 2001
From: Oleh Omelchenko <ptrvtch@protonmail.com>
Date: Thu, 25 Jun 2026 01:08:24 +0300
Subject: [PATCH] About: acknowledge the projects Astrolabe is built on and
 shaped by

---
 src/app/components/AboutModal.module.css | 21 ++++-
 src/app/components/AboutModal.tsx        | 97 +++++++++++++++++++++++-
 2 files changed, 115 insertions(+), 3 deletions(-)

diff --git a/src/app/components/AboutModal.module.css b/src/app/components/AboutModal.module.css
index 7000e7b..fb587ea 100644
--- a/src/app/components/AboutModal.module.css
+++ b/src/app/components/AboutModal.module.css
@@ -94,7 +94,26 @@
   vertical-align: top;
 }
 
-/* Privacy list */
+/* Acknowledgements — a labelled group above each credit list. */
+.ackGroup {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.ackLabel {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+/* Trailing "— what it's for" gloss after the project links. */
+.ackNote {
+  color: var(--text-secondary);
+}
+
+/* Privacy + acknowledgement lists */
 .list {
   margin: 0;
   padding-left: var(--space-5);
diff --git a/src/app/components/AboutModal.tsx b/src/app/components/AboutModal.tsx
index d169784..e6bbd3e 100644
--- a/src/app/components/AboutModal.tsx
+++ b/src/app/components/AboutModal.tsx
@@ -3,10 +3,12 @@
  *
  * Rendered inside ModalShell — no backdrop, close button, or focus trap here;
  * the shell owns all of that (docs/architecture/03 → Layer 3). This component
- * is pure content: app identity, keyboard shortcuts (§01D), and privacy posture
- * (SOUL.md — local-only, no accounts, no telemetry).
+ * is pure content: app identity, keyboard shortcuts (§01D), privacy posture
+ * (SOUL.md — local-only, no accounts, no telemetry), and acknowledgements of
+ * the projects Astrolabe is built on and shaped by.
  */
 
+import type { ReactNode } from 'react';
 import { FEEDBACK_EMAIL, feedbackMailtoHref } from '../feedback';
 import styles from './AboutModal.module.css';
 
@@ -23,6 +25,18 @@ const SHORTCUTS: readonly { keys: string; action: string }[] = [
   { keys: 'Esc', action: 'Close the active modal' },
 ];
 
+/**
+ * External acknowledgement link. Opens in a new tab so following a credit never
+ * unloads the workspace mid-edit; `rel` isolates the opened context.
+ */
+function Ack({ href, children }: { href: string; children: ReactNode }) {
+  return (
+    <a className={styles.link} href={href} target="_blank" rel="noopener noreferrer">
+      {children}
+    </a>
+  );
+}
+
 export function AboutModal() {
   return (
     <div className={styles.about}>
@@ -88,6 +102,85 @@ export function AboutModal() {
           .
         </p>
       </section>
+
+      {/* Acknowledgements */}
+      <section className={styles.section}>
+        <h3 className={styles.heading}>Acknowledgements</h3>
+        <p className={styles.body}>Astrolabe stands on the work of many open projects.</p>
+
+        <div className={styles.ackGroup}>
+          <h4 className={styles.ackLabel}>Built on</h4>
+          <ul className={styles.list}>
+            <li>
+              <Ack href="https://vega.github.io/vega-lite/">Vega-Lite</Ack>,{' '}
+              <Ack href="https://vega.github.io/vega/">Vega</Ack>,{' '}
+              <Ack href="https://github.com/vega/vega-embed">vega-embed</Ack>
+              <span className={styles.ackNote}> — render every chart</span>
+            </li>
+            <li>
+              <Ack href="https://microsoft.github.io/monaco-editor/">Monaco</Ack>
+              <span className={styles.ackNote}> — the JSON editor</span>
+            </li>
+            <li>
+              <Ack href="https://react.dev/">React</Ack>,{' '}
+              <Ack href="https://github.com/pmndrs/zustand">Zustand</Ack>,{' '}
+              <Ack href="https://vite.dev/">Vite</Ack>
+            </li>
+          </ul>
+        </div>
+
+        <div className={styles.ackGroup}>
+          <h4 className={styles.ackLabel}>Chart guidance shaped by</h4>
+          <ul className={styles.list}>
+            <li>
+              <Ack href="https://github.com/uwdata/draco">Draco</Ack>,{' '}
+              <Ack href="https://github.com/vega/voyager">Voyager</Ack>
+              <span className={styles.ackNote}> — encoding rules</span>
+            </li>
+            <li>
+              <Ack href="https://github.com/Financial-Times/chart-doctor">FT Visual Vocabulary</Ack>
+              , <Ack href="https://www.datawrapper.de/">Datawrapper</Ack>
+            </li>
+            <li>
+              <Ack href="https://github.com/vega/lyra">Lyra</Ack>
+              <span className={styles.ackNote}> — authoring interactions</span>
+            </li>
+          </ul>
+        </div>
+
+        <div className={styles.ackGroup}>
+          <h4 className={styles.ackLabel}>Design informed by</h4>
+          <ul className={styles.list}>
+            <li>
+              <Ack href="https://carbondesignsystem.com/">IBM Carbon</Ack>,{' '}
+              <Ack href="https://design-system.service.gov.uk/">GOV.UK</Ack>
+            </li>
+            <li>
+              <Ack href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA APG</Ack>,{' '}
+              <Ack href="https://www.nngroup.com/">Nielsen Norman</Ack>
+            </li>
+          </ul>
+        </div>
+
+        <div className={styles.ackGroup}>
+          <h4 className={styles.ackLabel}>Typography</h4>
+          <ul className={styles.list}>
+            <li>
+              <Ack href="https://github.com/IBM/plex">IBM Plex</Ack> and other open typefaces,
+              self-hosted via <Ack href="https://fontsource.org/">Fontsource</Ack>
+            </li>
+          </ul>
+        </div>
+      </section>
+
+      {/* Sibling project */}
+      <section className={styles.section}>
+        <h3 className={styles.heading}>Also from the maker</h3>
+        <p className={styles.body}>
+          Astrolabe has a sibling: <Ack href="https://syto.app">Syto</Ack>, a workspace for cleaning
+          and reshaping data before you chart it. Go take a look.
+        </p>
+      </section>
     </div>
   );
 }