From fad2b61c5bf0f275334ac36de5df293f8b4fbb64 Mon Sep 17 00:00:00 2001
From: Kyra Richards <kyramserio@gmail.com>
Date: Thu, 9 Jul 2026 16:13:30 -0500
Subject: [PATCH] site: revamp holding page while library rebuilds into
 packages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a Revamp holding page and gates AppShell on VITE_REVAMP_MODE (ON by
default). In revamp mode the site never calls fetchCatalog, so the site stays
live and is fully decoupled from .use-case-library/ and the use-case dirs —
which lets PR 4 delete them without breaking the site.

Set VITE_REVAMP_MODE=false to restore the full catalog site (while catalog.json
still exists). Verified: production build passes (478 modules), holding page
renders, no catalog request fires.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 use-case-library-site/frontend/src/main.tsx   | 11 +++
 .../frontend/src/pages/Revamp.tsx             | 78 +++++++++++++++++++
 2 files changed, 89 insertions(+)
 create mode 100644 use-case-library-site/frontend/src/pages/Revamp.tsx

diff --git a/use-case-library-site/frontend/src/main.tsx b/use-case-library-site/frontend/src/main.tsx
index ec218b5..f348b0b 100755
--- a/use-case-library-site/frontend/src/main.tsx
+++ b/use-case-library-site/frontend/src/main.tsx
@@ -6,10 +6,16 @@ import { fetchCatalog } from './api'
 import { Modal } from './Modal'
 import { Home } from './pages/Home'
 import { All } from './pages/All'
+import { Revamp } from './pages/Revamp'
 import { colors } from './theme'
 import type { Catalog } from './types'
 import './style.css'
 
+// Revamp mode is ON by default while the library is rebuilt into packages.
+// Set VITE_REVAMP_MODE=false to restore the full catalog site (only works while
+// .use-case-library/catalog.json still exists in the repo).
+const REVAMP_MODE = import.meta.env.VITE_REVAMP_MODE !== 'false'
+
 const App = (): JSX.Element => (
   <BrowserRouter>
     <AppShell />
@@ -17,6 +23,11 @@ const App = (): JSX.Element => (
 )
 
 const AppShell = (): JSX.Element => {
+  if (REVAMP_MODE) return <Revamp />
+  return <CatalogApp />
+}
+
+const CatalogApp = (): JSX.Element => {
   const [catalog, setCatalog] = useState<Catalog | null>(null)
   const [error, setError] = useState<string | null>(null)
 
diff --git a/use-case-library-site/frontend/src/pages/Revamp.tsx b/use-case-library-site/frontend/src/pages/Revamp.tsx
new file mode 100644
index 0000000..0a93715
--- /dev/null
+++ b/use-case-library-site/frontend/src/pages/Revamp.tsx
@@ -0,0 +1,78 @@
+import { brand, colors } from '../theme'
+
+/**
+ * Holding page shown while the use-case library is rebuilt into Runneth packages.
+ * Rendered instead of the catalog when revamp mode is on (see main.tsx), so the
+ * site stays live and never touches catalog.json.
+ */
+export const Revamp = (): JSX.Element => (
+  <main
+    style={{
+      minHeight: '100vh',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      textAlign: 'center',
+      padding: '48px 24px',
+      background: `radial-gradient(120% 80% at 50% -10%, ${brand.lime}33 0%, ${brand.sky}22 34%, ${brand.white} 68%)`,
+      color: colors.textBody,
+    }}
+  >
+    <div style={{ maxWidth: 560 }}>
+      <span
+        style={{
+          display: 'inline-block',
+          fontSize: 12,
+          fontWeight: 700,
+          letterSpacing: '0.14em',
+          textTransform: 'uppercase',
+          color: colors.textMuted,
+          marginBottom: 20,
+        }}
+      >
+        Runneth Library
+      </span>
+
+      <h1
+        style={{
+          fontSize: 'clamp(34px, 6vw, 52px)',
+          lineHeight: 1.05,
+          fontWeight: 700,
+          margin: '0 0 18px',
+          letterSpacing: '-0.02em',
+        }}
+      >
+        Pardon the sawdust.
+      </h1>
+
+      <p style={{ fontSize: 'clamp(16px, 2.4vw, 19px)', lineHeight: 1.5, margin: '0 0 14px' }}>
+        We&rsquo;re rebuilding the Runneth library into a tighter set of packages. Fewer knobs,
+        sharper tools, same superpowers. Back very soon.
+      </p>
+
+      <p style={{ fontSize: 14, lineHeight: 1.5, color: colors.textMuted, margin: '0 0 32px' }}>
+        Already running Runneth? Your installed use cases keep working. This is just the shop
+        window.
+      </p>
+
+      <a
+        href="https://motionapp.com"
+        style={{
+          display: 'inline-block',
+          padding: '12px 22px',
+          borderRadius: 999,
+          background: colors.primary,
+          color: brand.white,
+          fontSize: 14,
+          fontWeight: 600,
+          textDecoration: 'none',
+        }}
+      >
+        Back to Motion
+      </a>
+    </div>
+
+    <footer style={{ marginTop: 56, fontSize: 12, color: colors.textSubtle }}>Made by Motion.</footer>
+  </main>
+)