@commonpub/layer 0.3.37 → 0.4.0

package/pages/cookies.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+const runtimeConfig = useRuntimeConfig();
+const siteName = computed(() => (runtimeConfig.public.siteName as string) || 'CommonPub');
+
+useSeoMeta({ title: `Cookie Policy — ${siteName.value}` });
+
+const { cookies, consentLevel, acceptAll, acceptEssential, resetConsent, hasConsented } = useCookieConsent();
+
+const essentialCookies = computed(() => cookies.value.filter((c) => c.category === 'essential'));
+const functionalCookies = computed(() => cookies.value.filter((c) => c.category === 'functional'));
+const analyticsCookies = computed(() => cookies.value.filter((c) => c.category === 'analytics'));
+</script>
+
+<template>
+  <div class="cpub-legal">
+    <div class="cpub-legal-header">
+      <h1 class="cpub-legal-title">Cookie Policy</h1>
+      <p class="cpub-legal-updated">Last updated: {{ new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) }}</p>
+    </div>
+
+    <div class="cpub-legal-body">
+      <section class="cpub-legal-section">
+        <h2>What are cookies?</h2>
+        <p>Cookies are small text files stored on your device when you visit a website. They help the site remember your preferences and provide essential functionality.</p>
+      </section>
+
+      <section class="cpub-legal-section">
+        <h2>Your consent</h2>
+        <p v-if="hasConsented">
+          You have accepted <strong>{{ consentLevel === 'all' ? 'all cookies' : 'essential cookies only' }}</strong>.
+          You can change this at any time.
+        </p>
+        <p v-else>You have not yet made a cookie choice.</p>
+        <div class="cpub-cookie-consent-actions">
+          <button class="cpub-btn cpub-btn-sm" @click="acceptEssential">Essential only</button>
+          <button class="cpub-btn cpub-btn-sm cpub-btn-primary" @click="acceptAll">Accept all</button>
+          <button v-if="hasConsented" class="cpub-btn cpub-btn-sm" @click="resetConsent">Reset choice</button>
+        </div>
+      </section>
+
+      <!-- Essential Cookies -->
+      <section class="cpub-legal-section">
+        <h2>Essential cookies</h2>
+        <p>These are strictly necessary for the site to function. They cannot be disabled.</p>
+        <table class="cpub-cookie-table" v-if="essentialCookies.length > 0">
+          <thead>
+            <tr>
+              <th>Cookie</th>
+              <th>Purpose</th>
+              <th>Duration</th>
+              <th v-if="essentialCookies.some(c => c.provider)">Provider</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="cookie in essentialCookies" :key="cookie.name">
+              <td><code>{{ cookie.name }}</code></td>
+              <td>{{ cookie.description }}</td>
+              <td>{{ cookie.duration }}</td>
+              <td v-if="essentialCookies.some(c => c.provider)">{{ cookie.provider ?? siteName }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </section>
+
+      <!-- Functional Cookies -->
+      <section v-if="functionalCookies.length > 0" class="cpub-legal-section">
+        <h2>Functional cookies</h2>
+        <p>These remember your preferences (like dark mode) to improve your experience. They are set only with your consent.</p>
+        <table class="cpub-cookie-table">
+          <thead>
+            <tr>
+              <th>Cookie</th>
+              <th>Purpose</th>
+              <th>Duration</th>
+              <th v-if="functionalCookies.some(c => c.provider)">Provider</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="cookie in functionalCookies" :key="cookie.name">
+              <td><code>{{ cookie.name }}</code></td>
+              <td>{{ cookie.description }}</td>
+              <td>{{ cookie.duration }}</td>
+              <td v-if="functionalCookies.some(c => c.provider)">{{ cookie.provider ?? siteName }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </section>
+
+      <!-- Analytics Cookies -->
+      <section v-if="analyticsCookies.length > 0" class="cpub-legal-section">
+        <h2>Analytics cookies</h2>
+        <p>These help the instance operator understand how the site is used. They are set only with your consent.</p>
+        <table class="cpub-cookie-table">
+          <thead>
+            <tr>
+              <th>Cookie</th>
+              <th>Purpose</th>
+              <th>Duration</th>
+              <th>Provider</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="cookie in analyticsCookies" :key="cookie.name">
+              <td><code>{{ cookie.name }}</code></td>
+              <td>{{ cookie.description }}</td>
+              <td>{{ cookie.duration }}</td>
+              <td>{{ cookie.provider ?? siteName }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </section>
+
+      <section class="cpub-legal-section">
+        <h2>Managing cookies</h2>
+        <p>You can change your cookie preferences at any time using the buttons above or by clearing your browser cookies. Most browsers also allow you to control cookies through their settings.</p>
+        <p>For more information about how we handle your data, see our <NuxtLink to="/privacy">Privacy Policy</NuxtLink>.</p>
+      </section>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-legal {
+  max-width: 740px;
+  margin: 0 auto;
+  padding: var(--space-12) var(--space-6) var(--space-20);
+}
+
+.cpub-legal-header { margin-bottom: var(--space-10); }
+.cpub-legal-title { font-size: var(--text-3xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-2); }
+.cpub-legal-updated { font-size: var(--text-sm); color: var(--text-faint); }
+
+.cpub-legal-section { margin-bottom: var(--space-8); }
+.cpub-legal-section h2 { font-size: var(--text-lg); font-weight: var(--font-weight-bold); margin-bottom: var(--space-3); }
+.cpub-legal-section p { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-dim); margin-bottom: var(--space-3); }
+.cpub-legal-section a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
+
+.cpub-cookie-consent-actions {
+  display: flex;
+  gap: var(--space-2);
+  margin-top: var(--space-3);
+}
+
+.cpub-cookie-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+  border: var(--border-width-default) solid var(--border);
+  margin-top: var(--space-3);
+}
+
+.cpub-cookie-table th,
+.cpub-cookie-table td {
+  padding: var(--space-2) var(--space-3);
+  text-align: left;
+  border-bottom: var(--border-width-default) solid var(--border2);
+}
+
+.cpub-cookie-table th {
+  font-family: var(--font-mono);
+  font-size: var(--text-label);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-wide);
+  color: var(--text-faint);
+  background: var(--surface2);
+}
+
+.cpub-cookie-table td {
+  color: var(--text-dim);
+  line-height: var(--leading-snug);
+}
+
+.cpub-cookie-table code {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--accent);
+}
+
+.cpub-cookie-table tr:last-child td { border-bottom: none; }
+
+@media (max-width: 640px) {
+  .cpub-legal { padding: var(--space-6) var(--space-4) var(--space-12); }
+  .cpub-cookie-table { font-size: var(--text-xs); }
+  .cpub-cookie-table th, .cpub-cookie-table td { padding: var(--space-1) var(--space-2); }
+}
+</style>

package/pages/privacy.vue

@@ -0,0 +1,207 @@
+<script setup lang="ts">
+useSeoMeta({
+  title: `Privacy Policy — ${useSiteName()}`,
+  description: 'How we collect, use, and protect your personal data.',
+});
+
+const siteName = useSiteName();
+const { federation: federationEnabled } = useFeatures();
+</script>
+
+<template>
+  <div class="cpub-legal">
+    <div class="cpub-legal-header">
+      <h1 class="cpub-legal-title">Privacy Policy</h1>
+      <p class="cpub-legal-updated">Last updated: April 2026</p>
+    </div>
+
+    <div class="cpub-legal-body">
+      <section class="cpub-legal-section">
+        <h2>1. Who We Are</h2>
+        <p>
+          This {{ siteName }} instance is operated by its administrator (the "data controller").
+          {{ siteName }} is powered by <a href="https://commonpub.io" target="_blank" rel="noopener">CommonPub</a>,
+          an open-source, self-hosted platform. Each instance is independently operated and responsible for its own data processing.
+        </p>
+      </section>
+
+      <section class="cpub-legal-section">
+        <h2>2. What Data We Collect</h2>
+        <p>When you create an account, we collect:</p>
+        <ul>
+          <li><strong>Account data:</strong> email address, username, password (stored as a secure hash)</li>
+          <li><strong>Profile data:</strong> display name, bio, headline, location, website, avatar, banner image, social links, skills, pronouns, timezone (all optional)</li>
+          <li><strong>Content:</strong> projects, articles, blog posts, comments, and other content you create</li>
+          <li><strong>Activity data:</strong> likes, follows, bookmarks, hub memberships, learning path enrollments</li>
+          <li><strong>Messages:</strong> direct messages you send to other users on this instance</li>
+        </ul>
+        <p>We also automatically collect:</p>
+        <ul>
+          <li><strong>Session data:</strong> IP address and browser user agent when you log in, stored for the duration of your session (up to 7 days)</li>
+          <li><strong>Theme preference:</strong> your light/dark mode choice, stored in your browser's local storage</li>
+        </ul>
+      </section>
+
+      <section class="cpub-legal-section">
+        <h2>3. How We Use Your Data</h2>
+        <ul>
+          <li><strong>Providing the service:</strong> displaying your profile, publishing your content, delivering notifications</li>
+          <li><strong>Authentication:</strong> verifying your identity when you log in</li>
+          <li><strong>Security:</strong> protecting against unauthorized access, abuse, and spam</li>
+          <li><strong>Email notifications:</strong> sending notification digests and alerts you've opted into (configurable in settings)</li>
+        </ul>
+      </section>
+
+      <section class="cpub-legal-section">
+        <h2>4. Legal Basis for Processing</h2>
+        <p>We process your data under the following legal bases (GDPR Article 6):</p>
+        <ul>
+          <li><strong>Contract performance (Art. 6(1)(b)):</strong> processing necessary to provide you with the service you signed up for</li>
+          <li><strong>Legitimate interest (Art. 6(1)(f)):</strong> session security, rate limiting, and preventing abuse</li>
+        </ul>
+      </section>
+
+      <section class="cpub-legal-section">
+        <h2>5. Cookies</h2>
+        <p>We use a small number of cookies to provide and improve the service:</p>
+        <ul>
+          <li><strong>Session cookie</strong> (<code>better-auth.session_token</code>): strictly necessary — authenticates your login session. HttpOnly, secure, 7-day expiry.</li>
+          <li><strong>Consent cookie</strong> (<code>cpub-consent</code>): strictly necessary — stores your cookie consent choice.</li>
+          <li><strong>Color scheme</strong> (<code>cpub-color-scheme</code>): functional — remembers your light/dark mode preference. Set only with your consent.</li>
+        </ul>
+        <p>We do not use any advertising or tracking cookies. Your instance operator may add analytics cookies — these require your explicit consent. For the full list of cookies and to manage your preferences, visit our <NuxtLink to="/cookies">Cookie Policy</NuxtLink>.</p>
+      </section>
+
+      <section v-if="federationEnabled" class="cpub-legal-section">
+        <h2>6. Federation and ActivityPub</h2>
+        <p>This instance participates in the <a href="https://activitypub.rocks" target="_blank" rel="noopener">ActivityPub</a> federation protocol. When you publish content or interact publicly, the following data may be shared with remote instances:</p>
+        <ul>
+          <li>Your username, display name, avatar, and bio</li>
+          <li>Your published content (projects, articles, blog posts)</li>
+          <li>Your public interactions (likes, follows, comments on federated content)</li>
+        </ul>
+        <p>Your email address, location, social links, timezone, and other private profile fields are <strong>never</strong> shared via federation.</p>
+        <p><strong>Important:</strong> Once your data is federated to remote instances, this instance cannot guarantee its deletion on those servers. Remote instances operate independently and may retain cached copies of your public data even after you delete your account here.</p>
+      </section>
+
+      <section class="cpub-legal-section">
+        <h2>{{ federationEnabled ? '7' : '6' }}. Third-Party Services</h2>
+        <p>We load icon fonts from <strong>Font Awesome</strong> via the Cloudflare CDN (<code>cdnjs.cloudflare.com</code>). This means your browser makes requests to Cloudflare's servers, which are subject to <a href="https://www.cloudflare.com/privacypolicy/" target="_blank" rel="noopener">Cloudflare's privacy policy</a>.</p>
+        <p>We do not use any analytics services, advertising networks, or tracking technologies.</p>
+      </section>
+
+      <section class="cpub-legal-section">
+        <h2>{{ federationEnabled ? '8' : '7' }}. Data Retention</h2>
+        <ul>
+          <li><strong>Account data:</strong> retained until you delete your account</li>
+          <li><strong>Session data:</strong> automatically expires after 7 days of inactivity</li>
+          <li><strong>Content:</strong> retained until you delete it or delete your account</li>
+          <li><strong>Audit logs:</strong> retained per the instance operator's policy</li>
+        </ul>
+      </section>
+
+      <section class="cpub-legal-section">
+        <h2>{{ federationEnabled ? '9' : '8' }}. Your Rights</h2>
+        <p>Under the GDPR and similar data protection laws, you have the right to:</p>
+        <ul>
+          <li><strong>Access:</strong> view the data we hold about you (via your profile and settings)</li>
+          <li><strong>Rectification:</strong> update or correct your data (via your profile settings)</li>
+          <li><strong>Erasure:</strong> delete your account and all associated data (via account settings)</li>
+          <li><strong>Portability:</strong> download your data in a machine-readable format (via account settings)</li>
+          <li><strong>Restriction and objection:</strong> contact the instance administrator</li>
+        </ul>
+        <p>To exercise these rights, visit your <NuxtLink to="/settings/account">account settings</NuxtLink> or contact the instance administrator.</p>
+      </section>
+
+      <section class="cpub-legal-section">
+        <h2>{{ federationEnabled ? '10' : '9' }}. Contact</h2>
+        <p>For privacy-related inquiries, contact the administrator of this {{ siteName }} instance.</p>
+      </section>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-legal {
+  max-width: 740px;
+  margin: 0 auto;
+  padding: 48px 24px 80px;
+}
+
+.cpub-legal-header {
+  margin-bottom: 40px;
+}
+
+.cpub-legal-title {
+  font-size: 28px;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+
+.cpub-legal-updated {
+  font-size: 12px;
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+}
+
+.cpub-legal-body {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.cpub-legal-section h2 {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 12px;
+}
+
+.cpub-legal-section p {
+  font-size: 14px;
+  line-height: 1.7;
+  color: var(--text-dim);
+  margin-bottom: 8px;
+}
+
+.cpub-legal-section ul {
+  padding-left: 20px;
+  margin: 8px 0;
+}
+
+.cpub-legal-section li {
+  font-size: 14px;
+  line-height: 1.7;
+  color: var(--text-dim);
+  margin-bottom: 4px;
+}
+
+.cpub-legal-section strong {
+  color: var(--text);
+}
+
+.cpub-legal-section code {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  padding: 1px 5px;
+  background: var(--surface2);
+  border: var(--border-width-default) solid var(--border);
+}
+
+.cpub-legal-section a {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+.cpub-legal-section a:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 640px) {
+  .cpub-legal {
+    padding: 24px 16px 60px;
+  }
+  .cpub-legal-title {
+    font-size: 22px;
+  }
+}
+</style>

package/pages/settings/account.vue

@@ -86,6 +86,14 @@ async function handleDeleteAccount(): Promise<void> {
       </button>
     </form>
 
+    <div class="cpub-form-group">
+      <label class="cpub-form-label">Your Data</label>
+      <p class="cpub-form-hint cpub-mb-2">Download a copy of all your data in JSON format.</p>
+      <a href="/api/auth/export-data" download class="cpub-btn cpub-btn-sm">
+        <i class="fa-solid fa-download"></i> Download My Data
+      </a>
+    </div>
+
     <hr class="cpub-danger-divider" />
 
     <div>
@@ -126,6 +134,7 @@ async function handleDeleteAccount(): Promise<void> {
 
 <style scoped>
 .cpub-mt-2 { margin-top: var(--space-2); }
+.cpub-mb-2 { margin-bottom: var(--space-2); }
 
 .cpub-danger-divider {
   border: none;

package/pages/settings/appearance.vue

@@ -1,32 +1,112 @@
 <script setup lang="ts">
 definePageMeta({ middleware: 'auth' });
 
-const { themeId: theme, setTheme } = useTheme();
-const themes = [
-  { id: 'base', name: 'Light', desc: 'Sharp corners, offset shadows, blue accent' },
-  { id: 'dark', name: 'Dark', desc: 'Dark surfaces, same offset shadow aesthetic' },
-  { id: 'generics', name: 'Generics', desc: 'Dark minimal with soft glow' },
-];
+const { themeId, isDark, instanceDefault, setDarkMode } = useTheme();
+
+const familyLabels: Record<string, string> = {
+  base: 'Classic',
+  dark: 'Classic',
+  generics: 'Generics',
+  agora: 'Agora',
+  'agora-dark': 'Agora',
+};
+
+const currentFamily = computed(() => familyLabels[instanceDefault.value] ?? 'Classic');
+
+function previewColors(dark: boolean): { bg: string; surface: string; accent: string; text: string; border: string } {
+  // Resolve what theme ID would be for this mode
+  const families: Record<string, { light: string; dark: string }> = {
+    classic: { light: 'base', dark: 'dark' },
+    agora: { light: 'agora', dark: 'agora-dark' },
+    generics: { light: 'generics', dark: 'generics' },
+  };
+  const familyMap: Record<string, string> = {
+    base: 'classic', dark: 'classic', generics: 'generics',
+    agora: 'agora', 'agora-dark': 'agora',
+  };
+  const family = familyMap[instanceDefault.value] ?? 'classic';
+  const id = dark ? families[family]!.dark : families[family]!.light;
+
+  const palette: Record<string, { bg: string; surface: string; accent: string; text: string; border: string }> = {
+    base: { bg: '#fafaf9', surface: '#ffffff', accent: '#5b9cf6', text: '#1a1a1a', border: '#1a1a1a' },
+    dark: { bg: '#111111', surface: '#1a1a1a', accent: '#5b9cf6', text: '#e5e5e3', border: '#444440' },
+    generics: { bg: '#0c0c0b', surface: '#141413', accent: '#5b9cf6', text: '#d8d5cf', border: '#272725' },
+    agora: { bg: '#f7f4ed', surface: '#faf8f3', accent: '#3d8b5e', text: '#1a1a1a', border: '#1a1a1a' },
+    'agora-dark': { bg: '#0d1a12', surface: '#141f17', accent: '#4aa06e', text: '#e8e8e2', border: '#3a4f40' },
+  };
+  return palette[id] ?? palette.base!;
+}
 </script>
 
 <template>
   <div>
     <h2 class="cpub-section-title-lg">Appearance</h2>
 
-    <div class="cpub-theme-grid">
+    <p class="cpub-appearance-note">
+      Your instance uses the <strong>{{ currentFamily }}</strong> theme.
+      Choose your preferred color scheme.
+    </p>
+
+    <div class="cpub-scheme-grid">
+      <button
+        class="cpub-scheme-card"
+        :class="{ active: !isDark }"
+        @click="setDarkMode(false)"
+      >
+        <div
+          class="cpub-scheme-preview"
+          :style="{
+            backgroundColor: previewColors(false).bg,
+            borderColor: previewColors(false).border,
+          }"
+        >
+          <div
+            class="cpub-scheme-preview-card"
+            :style="{
+              backgroundColor: previewColors(false).surface,
+              borderColor: previewColors(false).border,
+              boxShadow: `3px 3px 0 ${previewColors(false).border}`,
+            }"
+          >
+            <div class="cpub-preview-heading" :style="{ backgroundColor: previewColors(false).text, opacity: 0.8 }"></div>
+            <div class="cpub-preview-line" :style="{ backgroundColor: previewColors(false).text, opacity: 0.3 }"></div>
+            <div class="cpub-preview-line short" :style="{ backgroundColor: previewColors(false).text, opacity: 0.2 }"></div>
+            <div class="cpub-preview-btn" :style="{ backgroundColor: previewColors(false).accent }"></div>
+          </div>
+        </div>
+        <div class="cpub-scheme-info">
+          <span class="cpub-scheme-name">Light</span>
+        </div>
+      </button>
+
       <button
-        v-for="t in themes"
-        :key="t.id"
-        class="cpub-theme-card"
-        :class="{ active: theme === t.id }"
-        @click="setTheme(t.id)"
+        class="cpub-scheme-card"
+        :class="{ active: isDark }"
+        @click="setDarkMode(true)"
       >
-        <div class="cpub-theme-preview" :data-theme="t.id">
-          <div class="cpub-theme-swatch"></div>
+        <div
+          class="cpub-scheme-preview"
+          :style="{
+            backgroundColor: previewColors(true).bg,
+            borderColor: previewColors(true).border,
+          }"
+        >
+          <div
+            class="cpub-scheme-preview-card"
+            :style="{
+              backgroundColor: previewColors(true).surface,
+              borderColor: previewColors(true).border,
+              boxShadow: `3px 3px 0 ${previewColors(true).border}`,
+            }"
+          >
+            <div class="cpub-preview-heading" :style="{ backgroundColor: previewColors(true).text, opacity: 0.8 }"></div>
+            <div class="cpub-preview-line" :style="{ backgroundColor: previewColors(true).text, opacity: 0.3 }"></div>
+            <div class="cpub-preview-line short" :style="{ backgroundColor: previewColors(true).text, opacity: 0.2 }"></div>
+            <div class="cpub-preview-btn" :style="{ backgroundColor: previewColors(true).accent }"></div>
+          </div>
         </div>
-        <div class="cpub-theme-info">
-          <span class="cpub-theme-name">{{ t.name }}</span>
-          <span class="cpub-theme-desc">{{ t.desc }}</span>
+        <div class="cpub-scheme-info">
+          <span class="cpub-scheme-name">Dark</span>
         </div>
       </button>
     </div>
@@ -34,48 +114,73 @@ const themes = [
 </template>
 
 <style scoped>
-.cpub-theme-grid {
+.cpub-appearance-note {
+  font-size: var(--text-sm);
+  color: var(--text-dim);
+  margin-bottom: var(--space-4);
+}
+
+.cpub-scheme-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--space-3);
+  max-width: 440px;
 }
 
-.cpub-theme-card {
+.cpub-scheme-card {
   background: var(--surface);
   border: var(--border-width-default) solid var(--border2);
-  padding: 12px;
+  padding: 0;
   cursor: pointer;
   text-align: left;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
 }
 
-.cpub-theme-card.active {
+.cpub-scheme-card.active {
   border-color: var(--accent);
   box-shadow: var(--shadow-accent);
 }
 
-.cpub-theme-card:hover {
+.cpub-scheme-card:hover {
   border-color: var(--border);
+  transform: translate(-1px, -1px);
+  box-shadow: var(--shadow-sm);
 }
 
-.cpub-theme-preview {
-  height: 60px;
-  background: var(--surface2);
-  border: var(--border-width-default) solid var(--border2);
-  margin-bottom: 8px;
+.cpub-scheme-preview {
+  height: 80px;
+  padding: var(--space-3);
+  border-bottom: var(--border-width-default) solid var(--border2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.cpub-theme-name {
-  font-size: 13px;
-  font-weight: 600;
-  display: block;
+.cpub-scheme-preview-card {
+  width: 75%;
+  padding: var(--space-2);
+  border-width: 2px;
+  border-style: solid;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
 }
 
-.cpub-theme-desc {
-  font-size: 11px;
-  color: var(--text-dim);
+.cpub-preview-heading { height: 5px; width: 55%; }
+.cpub-preview-line { height: 3px; width: 85%; }
+.cpub-preview-line.short { width: 45%; }
+.cpub-preview-btn { height: 12px; width: 35%; margin-top: 3px; }
+
+.cpub-scheme-info {
+  padding: var(--space-3);
+}
+
+.cpub-scheme-name {
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-semibold);
 }
 
-@media (max-width: 640px) {
-  .cpub-theme-grid { grid-template-columns: 1fr; }
+@media (max-width: 480px) {
+  .cpub-scheme-grid { grid-template-columns: 1fr; }
 }
 </style>