@rmdes/indiekit-endpoint-site-config 1.0.0-beta.2 → 1.0.0-beta.4

package/index.js

@@ -7,7 +7,6 @@ import { brandingRouter   } from "./lib/controllers/branding.js";
 import { homepageRouter   } from "./lib/controllers/homepage.js";
 import { blogRouter       } from "./lib/controllers/blog.js";
 import { navigationRouter } from "./lib/controllers/navigation.js";
-import { featuresRouter   } from "./lib/controllers/features.js";
 import { apiRouter        } from "./lib/controllers/api.js";
 
 import { getSiteConfig     } from "./lib/storage/get-site-config.js";
@@ -78,7 +77,6 @@ export default class SiteConfigEndpoint {
     protectedRouter.use("/homepage",   homepageRouter(Indiekit));
     protectedRouter.use("/blog",       blogRouter(Indiekit));
     protectedRouter.use("/navigation", navigationRouter(Indiekit));
-    protectedRouter.use("/features",   featuresRouter(Indiekit));
 
     this.routes = protectedRouter;
 

package/lib/controllers/api.js

@@ -79,14 +79,6 @@ export function apiRouter(Indiekit) {
           ? req.query.previewMode
           : configForPreview.branding.mode;
 
-      // We render theme.css with the pending mode so the preview iframe
-      // shows colors for the chosen side without needing JS to flip
-      // .dark on the iframe (which works too — both paths are wired).
-      const themeConfig = {
-        ...configForPreview,
-        branding: { ...configForPreview.branding, mode: previewMode },
-      };
-
       // Run contrast check on the preview's resolved state so the iframe
       // can show whether the visible colors are passing. Wrapped in try
       // so a broken accentBase doesn't blow up the preview.
@@ -96,7 +88,10 @@ export function apiRouter(Indiekit) {
         contrastResults = [];
       }
 
-      const themeCss = renderThemeCss(themeConfig);
+      // Preview always emits both light + dark (class-scoped) so the iframe's
+      // Light/Dark toggle works regardless of the saved mode. `previewMode`
+      // only selects which side is shown FIRST (via the toggle JS below).
+      const themeCss = renderThemeCss(configForPreview, { preview: true });
       res.setHeader("Content-Type", "text/html");
       res.setHeader("X-Content-Type-Options", "nosniff");
       res.setHeader("Cache-Control", "no-store");
@@ -186,10 +181,12 @@ export function apiRouter(Indiekit) {
  * elements (heading, body text, link, action button, card, focus state,
  * alert pills) so users see how each token affects real surfaces.
  *
- * The light/dark mode toggle is a vanilla `<button>` with inline JS that
- * adds/removes a `.dark` class on the document element AND persists the
- * choice in localStorage. The persisted choice is read on load and
- * applied to the html element.
+ * The light/dark mode toggle is a vanilla `<button>` with inline JS that sets
+ * an explicit `.light` OR `.dark` class on the document element (mutually
+ * exclusive) AND persists the choice in localStorage. Because the preview
+ * theme CSS (rendered with { preview: true }) ships both class-scoped blocks,
+ * the toggle always works — independent of the saved mode and the host OS
+ * color-scheme preference. The persisted choice is read on load and applied.
  *
  * Exported for unit testing.
  */
@@ -364,8 +361,13 @@ ${themeCss}
       var buttons = document.querySelectorAll('[data-pv-mode]');
 
       function apply(mode) {
-        if (mode === 'dark') html.classList.add('dark');
-        else html.classList.remove('dark');
+        if (mode === 'dark') {
+          html.classList.add('dark');
+          html.classList.remove('light');
+        } else {
+          html.classList.add('light');
+          html.classList.remove('dark');
+        }
         buttons.forEach(function (b) {
           var active = b.getAttribute('data-pv-mode') === mode;
           b.classList.toggle('pv-toggle--active', active);

package/lib/controllers/branding.js

@@ -52,12 +52,15 @@ export const ACCENT_SUGGESTIONS = Object.freeze([
  *
  * @type {ReadonlyArray<{slug: string, label: string}>}
  */
+// NOTE: `slug` values are stable identifiers persisted in MongoDB and MUST NOT
+// change (renaming would orphan saved configs). The `neutral-zinc` and
+// `warm-gray` slugs now carry the Sage / Clay palettes — see surface-presets.js.
 export const SURFACE_PRESET_OPTIONS = Object.freeze([
   Object.freeze({ slug: "warm-stone",   label: "Warm Stone" }),
-  Object.freeze({ slug: "warm-gray",    label: "Warm Gray" }),
+  Object.freeze({ slug: "warm-gray",    label: "Clay" }),
   Object.freeze({ slug: "stone",        label: "Stone (Neutral)" }),
   Object.freeze({ slug: "cool-slate",   label: "Cool Slate" }),
-  Object.freeze({ slug: "neutral-zinc", label: "Neutral Zinc" }),
+  Object.freeze({ slug: "neutral-zinc", label: "Sage" }),
 ]);
 
 /**
@@ -454,7 +457,14 @@ export function brandingRouter(Indiekit) {
         activeTab: "branding",
         curatedFonts: CURATED_FONTS,
         roleDefaults,
-        surfacePresets: SURFACE_PRESET_OPTIONS,
+        // Attach each preset's tone ramp (50→950) so the view can render a
+        // swatch strip — letting operators SEE each palette's identity before
+        // selecting it (the light-end tones look similar; the ramp shows the
+        // full character of each preset).
+        surfacePresets: SURFACE_PRESET_OPTIONS.map((opt) => ({
+          ...opt,
+          ramp: Object.values(SURFACE_PRESETS[opt.slug] || {}),
+        })),
         accentSuggestions: ACCENT_SUGGESTIONS,
         contrastResults,
         contrastFailures,

package/lib/render/surface-presets.js

@@ -1,8 +1,23 @@
-// `cool-slate`, `neutral-zinc`, `warm-gray`, and `stone` palette values are
-// derived from Tailwind CSS, MIT License — Copyright (c) Tailwind Labs, Inc.
-// https://tailwindcss.com/docs/customizing-colors
+// Surface presets — the neutral/tinted base palettes offered in the branding
+// admin. Each is an 11-step tone ramp (50 lightest → 950 darkest).
 //
-// `warm-stone` is the original rmendes.net palette.
+// Design note (2026-06-06): the original five were warm-stone, cool-slate,
+// stone, neutral-zinc and warm-gray. Three of those (stone, neutral-zinc,
+// warm-gray) were near-identical Tailwind neutrals — stone and neutral-zinc
+// even shared an identical tone-50 (#fafafa) — so switching between them
+// produced no visible change in light mode (where the page background is
+// tone-50). To keep persisted configs valid, the SLUGS are unchanged, but the
+// `neutral-zinc` and `warm-gray` ramps were re-skinned into distinct hue
+// families (Sage / Clay). Labels live in lib/controllers/branding.js.
+//
+//   warm-stone   — warm taupe/brown (original rmendes.net palette)
+//   cool-slate   — blue-gray (Tailwind "slate")
+//   stone        — true neutral gray (Tailwind "neutral")
+//   neutral-zinc — Sage: green-tinted neutral
+//   warm-gray    — Clay: terracotta/rose-tinted warm
+//
+// `cool-slate` and `stone` ramps are from Tailwind CSS (MIT License,
+// Copyright (c) Tailwind Labs, Inc. — https://tailwindcss.com/docs/colors).
 export const SURFACE_PRESETS = Object.freeze({
   "warm-stone": Object.freeze({
     50:  "#faf8f5", 100: "#f4f2ee", 200: "#e8e5df",
@@ -16,18 +31,19 @@ export const SURFACE_PRESETS = Object.freeze({
     600: "#475569", 700: "#334155", 800: "#1e293b",
     900: "#0f172a", 950: "#020617",
   }),
+  // Sage — green-tinted neutral. Slug kept as "neutral-zinc" for persistence.
   "neutral-zinc": Object.freeze({
-    50:  "#fafafa", 100: "#f4f4f5", 200: "#e4e4e7",
-    300: "#d4d4d8", 400: "#a1a1aa", 500: "#71717a",
-    600: "#52525b", 700: "#3f3f46", 800: "#27272a",
-    900: "#18181b", 950: "#09090b",
+    50:  "#f3f7f1", 100: "#e6efe3", 200: "#cfe0ca",
+    300: "#aecaa6", 400: "#82a878", 500: "#5e8a5a",
+    600: "#496e47", 700: "#3a5638", 800: "#283a27",
+    900: "#1a271a", 950: "#0e150e",
   }),
+  // Clay — terracotta/rose-tinted warm. Slug kept as "warm-gray".
   "warm-gray": Object.freeze({
-    // Tailwind "stone" rebranded as a warm-leaning gray.
-    50:  "#fafaf9", 100: "#f5f5f4", 200: "#e7e5e4",
-    300: "#d6d3d1", 400: "#a8a29e", 500: "#78716c",
-    600: "#57534e", 700: "#44403c", 800: "#292524",
-    900: "#1c1917", 950: "#0c0a09",
+    50:  "#faf4f1", 100: "#f4e7e1", 200: "#e8d2c7",
+    300: "#d8b3a2", 400: "#c08b73", 500: "#a8705a",
+    600: "#8a5642", 700: "#6d4334", 800: "#492d23",
+    900: "#2f1d16", 950: "#1a0f0b",
   }),
   "stone": Object.freeze({
     // Tailwind "neutral" — the truest gray with no warm or cool bias.

package/lib/render/write-site-json.js

@@ -47,7 +47,6 @@ export function renderSiteJson(config) {
     identity:      config.identity,
     branding:      config.branding,
     navigation:    config.navigation,
-    features:      config.features,
     updatedAt:     config.updatedAt,
   };
   const replacer = (key, value) => (PRIVATE_KEYS.has(key) ? undefined : value);

package/lib/render/write-theme-css.js

@@ -209,9 +209,18 @@ export function resolveBothModes(branding) {
  * Tier 3 contract. Mode handling follows the v2 spec §6.1.
  *
  * @param {object} config - Merged site config object (output of mergeWithDefaults)
+ * @param {object} [options]
+ * @param {boolean} [options.preview=false] - Preview mode. The live-preview
+ *   iframe is a design tool: its Light/Dark toggle must ALWAYS work regardless
+ *   of the saved `mode`. So in preview mode we emit BOTH a light and a dark
+ *   set, scoped to explicit `.light` / `.dark` classes (driven by the toolbar
+ *   toggle), with `:root` defaulting to light. No `prefers-color-scheme` media
+ *   query is used — the operator's explicit toggle choice should win over the
+ *   host OS preference while inspecting a design. The production path (no
+ *   options) is unchanged and still honors `mode` per spec §6.1.
  * @returns {string} CSS source ready to be written or served
  */
-export function renderThemeCss(config) {
+export function renderThemeCss(config, options = {}) {
   const branding = config.branding;
   const { light, dark, surface, accent } = resolveBothModes(branding);
   const mode = branding.mode || "auto";
@@ -225,6 +234,36 @@ export function renderThemeCss(config) {
     typographyBlock(branding.typography),
   ].join("\n");
 
+  // Preview mode: emit both light and dark as explicit, class-scoped blocks so
+  // the iframe's Light/Dark toggle is always functional and OS-independent.
+  if (options.preview === true) {
+    return [
+      ":root {",
+      shared,
+      "  /* Tier 3 — alerts (light) */",
+      tier3Block("light"),
+      "  /* Tier 2 — semantic roles (light) */",
+      tier2Block(light),
+      "}",
+      "",
+      // Explicit light class so the toggle can force light over any default.
+      ".light {",
+      "  /* Tier 3 — alerts (light) */",
+      tier3Block("light"),
+      "  /* Tier 2 — semantic roles (light) */",
+      tier2Block(light),
+      "}",
+      "",
+      ".dark {",
+      "  /* Tier 3 — alerts (dark) */",
+      tier3Block("dark"),
+      "  /* Tier 2 — semantic roles (dark) */",
+      tier2Block(dark),
+      "}",
+      "",
+    ].join("\n");
+  }
+
   // Tier 3 alerts vary by mode (different RGB values for light vs dark).
   // For "light" / "dark" modes we emit only the matching set in :root.
   // For "auto" we put light alerts in :root and dark alerts in both

package/lib/storage/backfill-identity.js

@@ -57,7 +57,7 @@ export async function maybeBackfillIdentity(Indiekit) {
   if (!homepageDoc || !hasRichIdentity(homepageDoc.identity)) return false;
 
   // Copy the rich identity over. saveSiteConfig handles the deepMerge + replaceOne
-  // so we preserve any other siteConfig keys (branding, navigation, features).
+  // so we preserve any other siteConfig keys (branding, navigation).
   await saveSiteConfig(Indiekit, { identity: homepageDoc.identity }, "backfill-from-homepage");
 
   console.log("[site-config] backfilled identity from homepageConfig (one-time migration)");

package/lib/storage/defaults-site.js

@@ -1,5 +1,5 @@
 /**
- * Default values for siteConfig collection (identity, branding, navigation, features).
+ * Default values for siteConfig collection (identity, branding, navigation).
  * Singleton _id: "primary".
  *
  * Schema v3 (unification):
@@ -7,7 +7,8 @@
  *   - layout subtree removed entirely (replaced by homepageConfig + navigation)
  *   - navigation.items[] added (was siteConfig.layout.navItems[])
  *   - branding subtree unchanged from v2 (Path D)
- *   - features subtree unchanged from v2
+ *   - features subtree DROPPED in v3.x (was unused; per-plugin config lives in
+ *     each plugin's own admin UI, plugin loadout lives in plugins.yaml).
  *
  * Frozen for immutability — never mutate this object directly.
  * @module storage/defaults-site
@@ -77,13 +78,6 @@ export const DEFAULTS_SITE = Object.freeze({
   navigation: Object.freeze({
     items: Object.freeze([]),
   }),
-  features: Object.freeze({
-    webmentions: true,
-    syndication: true,
-    activitypub: false,
-    search: true,
-    rss: true,
-  }),
 });
 
 // Legacy export name for any code path that hasn't been updated yet.

package/locales/en.json

@@ -7,8 +7,7 @@
       "branding": "Branding",
       "homepage": "Homepage",
       "blog": "Blog",
-      "navigation": "Navigation",
-      "features": "Feature Flags"
+      "navigation": "Navigation"
     },
     "common": {
       "save": "Save",
@@ -79,7 +78,7 @@
         "advancedDesc": "Most sites should leave these alone — the palette already derives them. Override only if you have a strong reason."
       },
       "surfacePreset": "Surface preset",
-      "surfacePresetHint": "Pick a neutral base palette. Warm Stone is cream/brown. Cool Slate is blue-gray. Neutral Zinc is a pure gray. Custom lets you define all 11 tones manually.",
+      "surfacePresetHint": "Pick a base palette. Warm Stone is cream/brown, Clay is terracotta/rose, Stone is a pure gray, Cool Slate is blue-gray, Sage is green-tinted. Custom lets you define all 11 tones manually.",
       "surfacePresetCustom": "Custom (advanced)",
       "surfaceCustom": "Custom surface tones",
       "surfaceCustomHint": "11 tones from lightest (50) to darkest (950). Applied only when the surface preset above is set to Custom.",
@@ -218,10 +217,6 @@
       "sidebarEnabled": "Sidebar enabled",
       "sidebarSide": "Sidebar side",
       "navItems": "Navigation items"
-    },
-    "features": {
-      "title": "Feature Flags",
-      "empty": "No plugins declare a feature flag yet."
     }
   }
 }

package/locales/fr.json

@@ -7,8 +7,7 @@
       "branding": "Identité visuelle",
       "homepage": "Accueil",
       "blog": "Blog",
-      "navigation": "Navigation",
-      "features": "Fonctionnalités"
+      "navigation": "Navigation"
     },
     "common": {
       "save": "Enregistrer",
@@ -79,7 +78,7 @@
         "advancedDesc": "La plupart des sites devraient laisser ces options telles quelles — la palette les dérive déjà. Ne les remplacez qu'avec une bonne raison."
       },
       "surfacePreset": "Palette de fond",
-      "surfacePresetHint": "Choisissez une palette neutre de base. Warm Stone est crème/brun. Cool Slate est bleu-gris. Neutral Zinc est un gris pur. Custom vous permet de définir manuellement les 11 tons.",
+      "surfacePresetHint": "Choisissez une palette de base. Warm Stone est crème/brun, Clay est terracotta/rosé, Stone est un gris pur, Cool Slate est bleu-gris, Sage est teinté vert. Custom vous permet de définir manuellement les 11 tons.",
       "surfacePresetCustom": "Personnalisé (avancé)",
       "surfaceCustom": "Tons personnalisés",
       "surfaceCustomHint": "11 tons du plus clair (50) au plus sombre (950). Appliqué uniquement lorsque la palette de fond ci-dessus est définie sur Personnalisé.",
@@ -218,10 +217,6 @@
       "sidebarEnabled": "Barre latérale activée",
       "sidebarSide": "Côté de la barre latérale",
       "navItems": "Éléments de navigation"
-    },
-    "features": {
-      "title": "Fonctionnalités",
-      "empty": "Aucun plugin ne déclare encore de drapeau de fonctionnalité."
     }
   }
 }

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@rmdes/indiekit-endpoint-site-config",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.4",
   "type": "module",
-  "description": "Site identity, branding, layout, and feature flag configuration for Indiekit",
+  "description": "Site identity, branding, and navigation configuration for Indiekit",
   "main": "index.js",
   "exports": {
     ".": "./index.js"

package/views/partials/tab-strip.njk

@@ -1,5 +1,5 @@
 {# Tab navigation for site-config admin - server-rendered URL tabs #}
-{# Expects: activeTab (string, one of identity|branding|homepage|blog|navigation|features) #}
+{# Expects: activeTab (string, one of identity|branding|homepage|blog|navigation) #}
 <style>
   .sc-tab-nav {
     display: flex;
@@ -31,8 +31,7 @@
     {key: 'branding',   href: '/site-config/branding'},
     {key: 'homepage',   href: '/site-config/homepage'},
     {key: 'blog',       href: '/site-config/blog'},
-    {key: 'navigation', href: '/site-config/navigation'},
-    {key: 'features',   href: '/site-config/features'}
+    {key: 'navigation', href: '/site-config/navigation'}
   ] %}
   {% for tab in tabs %}
     <a href="{{ tab.href }}"

package/views/site-config-branding.njk

@@ -122,6 +122,32 @@
     background: color-mix(in srgb, var(--color-primary, #0066cc) 8%, var(--color-background, #fff));
   }
 
+  /* Surface preset options with a tone-ramp preview */
+  .sc-preset-option {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--space-2xs, 0.375rem);
+    min-width: 9rem;
+  }
+
+  .sc-preset-option__head {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2xs, 0.375rem);
+  }
+
+  .sc-preset-ramp {
+    display: flex;
+    height: 0.85rem;
+    border-radius: 0.2rem;
+    overflow: hidden;
+    border: 1px solid var(--color-outline-variant, #ddd);
+  }
+
+  .sc-preset-chip {
+    flex: 1 1 0;
+  }
+
   /* Generic color picker (palette inputs) */
   .sc-color-picker {
     display: flex;
@@ -495,10 +521,19 @@
         <p class="field__hint">{{ __("siteConfig.branding.surfacePresetHint") }}</p>
         <div class="sc-radio-group">
           {% for preset in surfacePresets %}
-            <label class="sc-radio-label">
-              <input type="radio" name="surfacePreset" value="{{ preset.slug }}"
-                     {% if config.branding.surfacePreset == preset.slug %}checked{% endif %}>
-              {{ preset.label }}
+            <label class="sc-radio-label sc-preset-option">
+              <span class="sc-preset-option__head">
+                <input type="radio" name="surfacePreset" value="{{ preset.slug }}"
+                       {% if config.branding.surfacePreset == preset.slug %}checked{% endif %}>
+                {{ preset.label }}
+              </span>
+              {% if preset.ramp %}
+              <span class="sc-preset-ramp" aria-hidden="true">
+                {% for tone in preset.ramp %}
+                  <span class="sc-preset-chip" style="background-color: {{ tone }};"></span>
+                {% endfor %}
+              </span>
+              {% endif %}
             </label>
           {% endfor %}
           <label class="sc-radio-label">

package/lib/controllers/features.js

@@ -1,52 +0,0 @@
-import express from "express";
-import { getSiteConfig } from "../storage/get-site-config.js";
-import { saveSiteConfig } from "../storage/save-site-config.js";
-import { writeSiteJson } from "../render/write-site-json.js";
-
-/**
- * Discover feature flags from loaded plugins by reading `plugin.featureFlag`.
- * Plugins without the capability are skipped.
- */
-export function discoverFlags(Indiekit) {
-  const plugins = Indiekit.config?.plugins || [];
-  return plugins
-    .map((p) => p.featureFlag)
-    .filter(Boolean)
-    .sort((a, b) => (a.category || "").localeCompare(b.category || ""));
-}
-
-export function featuresRouter(Indiekit) {
-  const router = express.Router();
-
-  router.get("/", async (req, res, next) => {
-    try {
-      const config = await getSiteConfig(Indiekit);
-      const flags = discoverFlags(Indiekit);
-      res.render("site-config-features", {
-        config,
-        activeTab: "features",
-        flags,
-      });
-    } catch (error) {
-      next(error);
-    }
-  });
-
-  router.post("/", async (req, res, next) => {
-    try {
-      const flags = discoverFlags(Indiekit);
-      const features = {};
-      for (const flag of flags) {
-        features[flag.key] = req.body[`feature_${flag.key}`] === "on";
-      }
-      const userIdent = Indiekit.config?.publication?.me || "unknown";
-      const updated = await saveSiteConfig(Indiekit, { features }, userIdent);
-      await writeSiteJson(updated);
-      res.redirect("/site-config/features?saved=1");
-    } catch (error) {
-      next(error);
-    }
-  });
-
-  return router;
-}

package/views/site-config-features.njk

@@ -1,166 +0,0 @@
-{% extends "document.njk" %}
-
-{% block title %}{{ __('siteConfig.features.title') }}{% endblock %}
-
-{% block content %}
-<style>
-  .sc-dashboard {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-xl, 2rem);
-  }
-
-  .sc-section {
-    background: var(--color-offset, #f5f5f5);
-    border-radius: var(--border-radius-small, 0.5rem);
-    padding: var(--space-m, 1.5rem);
-  }
-
-  .sc-section h2 {
-    font: var(--font-heading, bold 1.25rem/1.4 sans-serif);
-    margin-block-end: var(--space-s, 0.75rem);
-    padding-block-end: var(--space-xs, 0.5rem);
-    border-block-end: 1px solid var(--color-outline-variant, #ddd);
-  }
-
-  .sc-section__desc {
-    color: var(--color-on-offset, #666);
-    font: var(--font-body, 0.875rem/1.5 sans-serif);
-    margin-block-end: var(--space-s, 0.75rem);
-  }
-
-  .hp-success {
-    background: var(--color-success-container, #d4edda);
-    border: 1px solid var(--color-success, #28a745);
-    border-radius: var(--border-radius-small, 0.25rem);
-    padding: var(--space-s, 0.75rem);
-    margin-block-end: var(--space-m, 1rem);
-  }
-
-  /* Empty state */
-  .sc-empty-state {
-    text-align: center;
-    padding: var(--space-xl, 2rem) var(--space-m, 1rem);
-    color: var(--color-on-offset, #888);
-    font: var(--font-body, 0.875rem/1.5 sans-serif);
-    background: var(--color-offset, #f5f5f5);
-    border: 1px dashed var(--color-outline-variant, #ddd);
-    border-radius: var(--border-radius-small, 0.5rem);
-  }
-
-  .sc-empty-state p {
-    margin: 0;
-  }
-
-  /* Flag rows */
-  .sc-flag-row {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--space-s, 0.75rem);
-    padding: var(--space-s, 0.75rem) 0;
-    border-bottom: 1px solid var(--color-outline-variant, #eee);
-  }
-
-  .sc-flag-row:last-child {
-    border-bottom: none;
-    padding-bottom: 0;
-  }
-
-  .sc-flag-row:first-child {
-    padding-top: 0;
-  }
-
-  .sc-flag-label {
-    display: flex;
-    flex-direction: column;
-    gap: 0.125rem;
-    flex: 1;
-  }
-
-  .sc-flag-label strong {
-    font: var(--font-body, 0.875rem/1.5 sans-serif);
-    font-weight: 600;
-    color: var(--color-on-surface, inherit);
-  }
-
-  .sc-flag-hint {
-    font: var(--font-caption, 0.75rem/1.4 sans-serif);
-    color: var(--color-on-offset, #888);
-    margin: 0;
-  }
-
-  .sc-restart-badge {
-    display: inline-flex;
-    align-items: center;
-    font: var(--font-caption, 0.7rem/1.4 sans-serif);
-    font-weight: 600;
-    color: var(--color-warning, #856404);
-    background: color-mix(in srgb, var(--color-warning, #856404) 12%, var(--color-background, #fff));
-    border: 1px solid color-mix(in srgb, var(--color-warning, #856404) 30%, transparent);
-    border-radius: var(--border-radius-small, 0.25rem);
-    padding: 0.1rem 0.4rem;
-    white-space: nowrap;
-  }
-</style>
-
-<header class="page-header">
-  <h1 class="page-header__title">{{ __('siteConfig.title') }}</h1>
-</header>
-
-{% include "partials/tab-strip.njk" %}
-
-{% if request.query.saved %}
-<div class="hp-success">
-  <p>{{ __('siteConfig.common.saved') }}</p>
-</div>
-{% endif %}
-
-{% if flags.length == 0 %}
-
-  <div class="sc-empty-state">
-    <p>{{ __('siteConfig.features.empty') }}</p>
-  </div>
-
-{% else %}
-
-  <form method="post" action="/site-config/features" class="sc-dashboard">
-
-    {% set currentCategory = '' %}
-    {% for flag in flags %}
-
-      {% if flag.category != currentCategory %}
-        {% set currentCategory = flag.category %}
-        <section class="sc-section">
-          <h2>{{ flag.category }}</h2>
-      {% endif %}
-
-      <div class="sc-flag-row">
-        <input type="checkbox"
-               id="feature_{{ flag.key }}"
-               name="feature_{{ flag.key }}"
-               {% if config.features[flag.key] %}checked{% elif flag.default %}checked{% endif %}>
-        <label class="sc-flag-label" for="feature_{{ flag.key }}">
-          <strong>{{ flag.label }}</strong>
-          {% if flag.description %}
-            <p class="sc-flag-hint">{{ flag.description }}</p>
-          {% endif %}
-          {% if flag.requiresRestart %}
-            <span class="sc-restart-badge">Restart required</span>
-          {% endif %}
-        </label>
-      </div>
-
-      {% if loop.last or flags[loop.index].category != flag.category %}
-        </section>
-      {% endif %}
-
-    {% endfor %}
-
-    <div class="button-group">
-      <button type="submit" class="button button--primary">{{ __('siteConfig.common.save') }}</button>
-    </div>
-
-  </form>
-
-{% endif %}
-{% endblock %}