npm - @rmdes/indiekit-endpoint-site-config - Versions diffs - 1.0.0-alpha.2 → 1.0.0-alpha.3 - Mend

@rmdes/indiekit-endpoint-site-config 1.0.0-alpha.2 → 1.0.0-alpha.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/lib/controllers/branding.js +1 -3
package/lib/controllers/features.js +1 -5
package/lib/controllers/identity.js +1 -3
package/lib/controllers/layout.js +1 -5
package/locales/en.json +1 -3
package/locales/fr.json +1 -3
package/package.json +1 -1
package/views/partials/color-picker.njk +22 -7
package/views/partials/tab-strip.njk +30 -4
package/views/site-config-branding.njk +300 -65
package/views/site-config-features.njk +160 -29
package/views/site-config-identity.njk +162 -32
package/views/site-config-layout.njk +220 -44

package/lib/controllers/branding.js CHANGED Viewed

@@ -19,7 +19,6 @@ export function brandingRouter(Indiekit) {
         config,
         activeTab: "branding",
         curatedFonts: CURATED_FONTS,
-        success: req.query.success,
       });
     } catch (error) {
       next(error);
@@ -86,8 +85,7 @@ export function brandingRouter(Indiekit) {
       const updated = await saveSiteConfig(Indiekit, patch, userIdent);
       await writeSiteJson(updated);
       await writeThemeCss(updated);
-      const message = encodeURIComponent(res.locals.__("siteConfig.common.saved"));
-      res.redirect(`/site-config/branding?success=${message}`);
+      res.redirect("/site-config/branding?saved=1");
     } catch (error) {
       next(error);
     }

package/lib/controllers/features.js CHANGED Viewed

@@ -26,7 +26,6 @@ export function featuresRouter(Indiekit) {
         config,
         activeTab: "features",
         flags,
-        success: req.query.success,
       });
     } catch (error) {
       next(error);
@@ -43,10 +42,7 @@ export function featuresRouter(Indiekit) {
       const userIdent = Indiekit.config?.publication?.me || "unknown";
       const updated = await saveSiteConfig(Indiekit, { features }, userIdent);
       await writeSiteJson(updated);
-      const message = encodeURIComponent(
-        res.locals.__("siteConfig.common.saved"),
-      );
-      res.redirect(`/site-config/features?success=${message}`);
+      res.redirect("/site-config/features?saved=1");
     } catch (error) {
       next(error);
     }

package/lib/controllers/identity.js CHANGED Viewed

@@ -27,7 +27,6 @@ export function identityRouter(Indiekit) {
       res.render("site-config-identity", {
         config,
         activeTab: "identity",
-        success: req.query.success,
       });
     } catch (error) {
       next(error);
@@ -50,8 +49,7 @@ export function identityRouter(Indiekit) {
       const userIdent = Indiekit.config?.publication?.me || "unknown";
       const updated = await saveSiteConfig(Indiekit, patch, userIdent);
       await writeSiteJson(updated);
-      const message = encodeURIComponent(res.locals.__("siteConfig.common.saved"));
-      res.redirect(`/site-config/identity?success=${message}`);
+      res.redirect("/site-config/identity?saved=1");
     } catch (error) {
       next(error);
     }

package/lib/controllers/layout.js CHANGED Viewed

@@ -15,7 +15,6 @@ export function layoutRouter(Indiekit) {
         config,
         activeTab: "layout",
         presets: PRESETS,
-        success: req.query.success,
       });
     } catch (error) {
       next(error);
@@ -53,10 +52,7 @@ export function layoutRouter(Indiekit) {
       const userIdent = Indiekit.config?.publication?.me || "unknown";
       const updated = await saveSiteConfig(Indiekit, patch, userIdent);
       await writeSiteJson(updated);
-      const message = encodeURIComponent(
-        res.locals.__("siteConfig.common.saved"),
-      );
-      res.redirect(`/site-config/layout?success=${message}`);
+      res.redirect("/site-config/layout?saved=1");
     } catch (error) {
       next(error);
     }

package/locales/en.json CHANGED Viewed

@@ -33,9 +33,7 @@
       "fontSans": "Sans-serif font",
       "fontSerif": "Serif font",
       "fontMono": "Monospace font",
-      "fontHosting": "Font hosting",
-      "logo": "Logo",
-      "favicon": "Favicon"
+      "fontHosting": "Font hosting"
     },
     "layout": {
       "title": "Layout",

package/locales/fr.json CHANGED Viewed

@@ -33,9 +33,7 @@
       "fontSans": "Police sans-serif",
       "fontSerif": "Police serif",
       "fontMono": "Police mono",
-      "fontHosting": "Hébergement des polices",
-      "logo": "Logo",
-      "favicon": "Favicon"
+      "fontHosting": "Hébergement des polices"
     },
     "layout": {
       "title": "Mise en page",

package/package.json CHANGED Viewed

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

package/views/partials/color-picker.njk CHANGED Viewed

@@ -1,11 +1,26 @@
-{# locals: name (string), label (string), value (hex string) #}
-<div class="form-field form-field--color">
-  <label for="{{ name }}">{{ label }}</label>
-  <div class="color-picker">
-    <input type="color" class="color-picker__swatch" id="{{ name }}-swatch" value="{{ value }}"
+{#
+  Nunjucks macro: colorPicker(name, label, value)
+  Usage:
+    {% import "partials/color-picker.njk" as cp %}
+    {{ cp.colorPicker("accentBase", "Accent colour", config.branding.accentBase) }}
+#}
+{% macro colorPicker(name, label, value) %}
+<div class="field sc-color-field">
+  <label class="field__label" for="{{ name }}">{{ label }}</label>
+  <div class="sc-color-picker">
+    <input type="color"
+           class="sc-color-picker__swatch"
+           id="{{ name }}-swatch"
+           value="{{ value or '#888888' }}"
            oninput="document.getElementById('{{ name }}').value = this.value">
-    <input type="text" class="color-picker__hex" id="{{ name }}" name="{{ name }}"
-           value="{{ value }}" pattern="^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$" required
+    <input class="field__input sc-color-picker__hex"
+           type="text"
+           id="{{ name }}"
+           name="{{ name }}"
+           value="{{ value or '#888888' }}"
+           pattern="^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$"
+           required
            oninput="document.getElementById('{{ name }}-swatch').value = this.value">
   </div>
 </div>
+{% endmacro %}

package/views/partials/tab-strip.njk CHANGED Viewed

@@ -1,14 +1,40 @@
-{# locals: activeTab (string, one of identity|branding|layout|features) #}
-<nav class="site-config__tabs" aria-label="{{ __('siteConfig.title') }}">
+{# Tab navigation for site-config admin - server-rendered URL tabs #}
+{# Expects: activeTab (string, one of identity|branding|layout|features) #}
+<style>
+  .sc-tab-nav {
+    display: flex;
+    gap: 0;
+    border-bottom: 2px solid var(--color-outline-variant, #ddd);
+    margin-block-end: var(--space-xl, 2rem);
+  }
+  .sc-tab-nav__item {
+    padding: var(--space-s, 0.75rem) var(--space-m, 1.25rem);
+    text-decoration: none;
+    color: var(--color-on-offset, #666);
+    font-weight: 500;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -2px;
+    transition: color 0.2s, border-color 0.2s;
+  }
+  .sc-tab-nav__item:hover {
+    color: var(--color-primary, #0066cc);
+  }
+  .sc-tab-nav__item--active {
+    color: var(--color-primary, #0066cc);
+    border-bottom-color: var(--color-primary, #0066cc);
+    font-weight: 600;
+  }
+</style>
+<nav class="sc-tab-nav" aria-label="{{ __('siteConfig.title') }}">
   {% set tabs = [
     {key: 'identity', href: '/site-config/identity'},
     {key: 'branding', href: '/site-config/branding'},
-    {key: 'layout', href: '/site-config/layout'},
+    {key: 'layout',   href: '/site-config/layout'},
     {key: 'features', href: '/site-config/features'}
   ] %}
   {% for tab in tabs %}
     <a href="{{ tab.href }}"
-       class="site-config__tab {% if activeTab == tab.key %}site-config__tab--active{% endif %}"
+       class="sc-tab-nav__item{% if activeTab == tab.key %} sc-tab-nav__item--active{% endif %}"
        {% if activeTab == tab.key %}aria-current="page"{% endif %}>
       {{ __('siteConfig.tabs.' + tab.key) }}
     </a>

package/views/site-config-branding.njk CHANGED Viewed

@@ -1,76 +1,311 @@
 {% extends "document.njk" %}
+{% import "partials/color-picker.njk" as cp %}
 {% block title %}{{ __('siteConfig.branding.title') }}{% endblock %}
 {% block content %}
-  <h1>{{ __('siteConfig.title') }}</h1>
-  {% include "partials/tab-strip.njk" %}
-  <form method="post" action="/site-config/branding" class="site-config__form site-config__form--branding">
-    <div class="site-config__columns">
-      <div class="site-config__form-column">
-        <fieldset>
-          <legend>{{ __('siteConfig.branding.surfacePreset') }}</legend>
-          <div class="form-radio-group">
-            {% for preset in ['warm-stone', 'cool-slate', 'neutral-zinc', 'custom'] %}
-              <label class="form-radio">
-                <input type="radio" name="surfacePreset" value="{{ preset }}"
-                       {% if config.branding.surfacePreset == preset %}checked{% endif %}>
-                <span>{{ preset }}</span>
-              </label>
-            {% endfor %}
-          </div>
-        </fieldset>
-        <fieldset class="surface-custom" data-show-when="surfacePreset=custom">
-          <legend>{{ __('siteConfig.branding.surfaceCustom') }}</legend>
-          {% for tone in [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] %}
-            {% set v = config.branding.surfaceCustom and config.branding.surfaceCustom[tone] or '#888888' %}
-            {% include "partials/color-picker.njk" with { name: 'surfaceCustom_' + tone, label: 'surface-' + tone, value: v } %}
-          {% endfor %}
-        </fieldset>
-        <fieldset>
-          <legend>{{ __('siteConfig.branding.accent') }}</legend>
-          {% include "partials/color-picker.njk" with { name: 'accentBase', label: __('siteConfig.branding.accent'), value: config.branding.accentBase } %}
-        </fieldset>
-        <fieldset>
-          <legend>{{ __('siteConfig.branding.brandTokens') }}</legend>
-          {% for token in ['primary', 'link', 'focus', 'success', 'warning', 'danger'] %}
-            {% include "partials/color-picker.njk" with { name: 'colors_' + token, label: __('siteConfig.branding.' + token), value: config.branding.colors[token] } %}
-          {% endfor %}
-        </fieldset>
-        <fieldset>
-          <legend>{{ __('siteConfig.branding.typography') }}</legend>
-          {% for cat in ['sans', 'serif', 'mono'] %}
-            <div class="form-field">
-              <label for="typography_{{ cat }}">{{ __('siteConfig.branding.font' + cat | capitalize) }}</label>
-              <select id="typography_{{ cat }}" name="typography_{{ cat }}">
-                {% for f in curatedFonts[cat] %}
-                  <option value="{{ f }}" {% if config.branding.typography[cat] == f %}selected{% endif %}>{{ f }}</option>
-                {% endfor %}
-              </select>
-            </div>
-          {% endfor %}
-          <div class="form-field">
-            <label for="typography_hosting">{{ __('siteConfig.branding.fontHosting') }}</label>
-            <select id="typography_hosting" name="typography_hosting">
-              <option value="self" {% if config.branding.typography.hosting == 'self' %}selected{% endif %}>self-hosted</option>
-              <option value="bunny" {% if config.branding.typography.hosting == 'bunny' %}selected{% endif %}>Bunny Fonts</option>
-            </select>
-          </div>
-        </fieldset>
-        <button type="submit" class="button">{{ __('siteConfig.common.save') }}</button>
+<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);
+  }
+  /* Field grid for two-column layouts */
+  .hp-field-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-m, 1rem) var(--space-s, 0.75rem);
+  }
+  .hp-field-grid .field--full {
+    grid-column: 1 / -1;
+  }
+  @media (max-width: 640px) {
+    .hp-field-grid {
+      grid-template-columns: 1fr;
+    }
+    .hp-field-grid .field--full {
+      grid-column: 1;
+    }
+  }
+  /* Field styling */
+  .sc-dashboard .field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  .sc-dashboard .field__label {
+    display: block;
+    font: var(--font-caption, 0.75rem/1.4 sans-serif);
+    font-weight: 600;
+    color: var(--color-on-surface, inherit);
+  }
+  .sc-dashboard .field__input {
+    width: 100%;
+    padding: var(--space-2xs, 0.375rem) var(--space-xs, 0.5rem);
+    border: 1px solid var(--color-outline-variant, #ccc);
+    border-radius: var(--border-radius-small, 0.25rem);
+    font: var(--font-body, 0.875rem/1.5 sans-serif);
+    background: var(--color-background, #fff);
+    color: var(--color-on-surface, inherit);
+    transition: border-color 0.15s;
+  }
+  .sc-dashboard .field__input:focus {
+    outline: none;
+    border-color: var(--color-primary, #0066cc);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, #0066cc) 20%, transparent);
+  }
+  .sc-dashboard .field__hint {
+    color: var(--color-on-offset, #888);
+    font: var(--font-caption, 0.75rem/1.4 sans-serif);
+    margin: 0;
+  }
+  /* Radio group */
+  .sc-radio-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-s, 0.75rem);
+    margin-block-start: var(--space-xs, 0.5rem);
+  }
+  .sc-radio-label {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2xs, 0.375rem);
+    cursor: pointer;
+    font: var(--font-body, 0.875rem/1.5 sans-serif);
+    padding: var(--space-2xs, 0.375rem) var(--space-s, 0.75rem);
+    border: 1px solid var(--color-outline-variant, #ccc);
+    border-radius: var(--border-radius-small, 0.25rem);
+    background: var(--color-background, #fff);
+    transition: border-color 0.15s, background 0.15s;
+  }
+  .sc-radio-label:has(input:checked) {
+    border-color: var(--color-primary, #0066cc);
+    background: color-mix(in srgb, var(--color-primary, #0066cc) 8%, var(--color-background, #fff));
+  }
+  /* Color picker compound */
+  .sc-color-picker {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs, 0.5rem);
+  }
+  .sc-color-picker__swatch {
+    width: 2.5rem;
+    height: 2.25rem;
+    padding: 2px;
+    border: 1px solid var(--color-outline-variant, #ccc);
+    border-radius: var(--border-radius-small, 0.25rem);
+    background: var(--color-background, #fff);
+    cursor: pointer;
+    flex-shrink: 0;
+  }
+  .sc-color-picker .field__input {
+    flex: 1;
+  }
+  /* Surface tones grid */
+  .sc-tones-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
+    gap: var(--space-s, 0.75rem);
+  }
+  /* Two-column layout for branding (form + preview) */
+  .sc-branding-layout {
+    display: grid;
+    grid-template-columns: 1fr 480px;
+    gap: var(--space-xl, 2rem);
+    align-items: start;
+  }
+  @media (max-width: 1024px) {
+    .sc-branding-layout {
+      grid-template-columns: 1fr;
+    }
+  }
+  .sc-preview-panel {
+    position: sticky;
+    top: var(--space-m, 1rem);
+  }
+  .sc-preview-panel h3 {
+    font: var(--font-heading, bold 1rem/1.4 sans-serif);
+    margin-block-end: var(--space-s, 0.75rem);
+    color: var(--color-on-surface, inherit);
+  }
+  .sc-preview-iframe {
+    width: 100%;
+    height: 600px;
+    border: 1px solid var(--color-outline-variant, #ccc);
+    border-radius: var(--border-radius-small, 0.5rem);
+    background: var(--color-background, #fff);
+  }
+</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 %}
+<div class="sc-branding-layout">
+  <form method="post" action="/site-config/branding" class="sc-dashboard">
+    {# Surface Preset #}
+    <section class="sc-section">
+      <h2>{{ __('siteConfig.branding.surfacePreset') }}</h2>
+      <p class="sc-section__desc">Choose a base surface palette or define your own custom tones.</p>
+      <div class="sc-radio-group">
+        {% for preset in ['warm-stone', 'cool-slate', 'neutral-zinc', 'custom'] %}
+          <label class="sc-radio-label">
+            <input type="radio" name="surfacePreset" value="{{ preset }}"
+                   {% if config.branding.surfacePreset == preset %}checked{% endif %}>
+            {{ preset }}
+          </label>
+        {% endfor %}
+      </div>
+    </section>
+    {# Custom Surface Tones #}
+    <section class="sc-section">
+      <h2>{{ __('siteConfig.branding.surfaceCustom') }}</h2>
+      <p class="sc-section__desc">11 tones from lightest (50) to darkest (950). Only applied when preset is set to "custom".</p>
+      <div class="sc-tones-grid">
+        {% for tone in [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] %}
+          {% set toneVal = config.branding.surfaceCustom[tone] if config.branding.surfaceCustom else '#888888' %}
+          {{ cp.colorPicker('surfaceCustom_' + tone, 'surface-' + tone, toneVal) }}
+        {% endfor %}
+      </div>
+    </section>
+    {# Accent Colour #}
+    <section class="sc-section">
+      <h2>{{ __('siteConfig.branding.accent') }}</h2>
+      <p class="sc-section__desc">Base hue used to derive the accent scale.</p>
+      <div class="hp-field-grid">
+        <div class="field--full">
+          {{ cp.colorPicker('accentBase', __('siteConfig.branding.accent'), config.branding.accentBase or '#0066cc') }}
+        </div>
+      </div>
+    </section>
+    {# Brand Tokens #}
+    <section class="sc-section">
+      <h2>{{ __('siteConfig.branding.brandTokens') }}</h2>
+      <p class="sc-section__desc">Semantic colours for UI states.</p>
+      <div class="hp-field-grid">
+        {% for token in ['primary', 'link', 'focus', 'success', 'warning', 'danger'] %}
+          {{ cp.colorPicker('colors_' + token, __('siteConfig.branding.' + token), config.branding.colors[token] or '#888888') }}
+        {% endfor %}
       </div>
+    </section>
+    {# Typography #}
+    <section class="sc-section">
+      <h2>{{ __('siteConfig.branding.typography') }}</h2>
+      <div class="hp-field-grid">
+        <div class="field">
+          <label class="field__label" for="typography_sans">{{ __('siteConfig.branding.fontSans') }}</label>
+          <select class="field__input" id="typography_sans" name="typography_sans">
+            {% for f in curatedFonts.sans %}
+              <option value="{{ f }}" {% if config.branding.typography.sans == f %}selected{% endif %}>{{ f }}</option>
+            {% endfor %}
+          </select>
+        </div>
+        <div class="field">
+          <label class="field__label" for="typography_serif">{{ __('siteConfig.branding.fontSerif') }}</label>
+          <select class="field__input" id="typography_serif" name="typography_serif">
+            {% for f in curatedFonts.serif %}
+              <option value="{{ f }}" {% if config.branding.typography.serif == f %}selected{% endif %}>{{ f }}</option>
+            {% endfor %}
+          </select>
+        </div>
+        <div class="field">
+          <label class="field__label" for="typography_mono">{{ __('siteConfig.branding.fontMono') }}</label>
+          <select class="field__input" id="typography_mono" name="typography_mono">
+            {% for f in curatedFonts.mono %}
+              <option value="{{ f }}" {% if config.branding.typography.mono == f %}selected{% endif %}>{{ f }}</option>
+            {% endfor %}
+          </select>
+        </div>
+        <div class="field">
+          <label class="field__label" for="typography_hosting">{{ __('siteConfig.branding.fontHosting') }}</label>
+          <select class="field__input" id="typography_hosting" name="typography_hosting">
+            <option value="self" {% if config.branding.typography.hosting == 'self' %}selected{% endif %}>Self-hosted</option>
+            <option value="bunny" {% if config.branding.typography.hosting == 'bunny' %}selected{% endif %}>Bunny Fonts</option>
+          </select>
+        </div>
-      <div class="site-config__preview-column">
-        <h3>{{ __('siteConfig.common.preview') }}</h3>
-        {# TODO Task 10: /site-config/api/preview endpoint not yet implemented; iframe will 404 until then #}
-        <iframe src="/site-config/api/preview" class="site-config__preview-iframe" title="{{ __('siteConfig.common.preview') }}"></iframe>
       </div>
+    </section>
+    <div class="button-group">
+      <button type="submit" class="button button--primary">{{ __('siteConfig.common.save') }}</button>
     </div>
   </form>
+  {# Live preview panel #}
+  <aside class="sc-preview-panel">
+    <h3>{{ __('siteConfig.common.preview') }}</h3>
+    {# Preview iframe — renders a styled sample page at /site-config/api/preview #}
+    <iframe src="/site-config/api/preview"
+            class="sc-preview-iframe"
+            title="{{ __('siteConfig.common.preview') }}"></iframe>
+  </aside>
+</div>
 {% endblock %}

package/views/site-config-features.njk CHANGED Viewed

@@ -3,33 +3,164 @@
 {% block title %}{{ __('siteConfig.features.title') }}{% endblock %}
 {% block content %}
-  <h1>{{ __('siteConfig.title') }}</h1>
-  {% include "partials/tab-strip.njk" %}
-  {% if flags.length == 0 %}
-    <p class="empty-state">{{ __('siteConfig.features.empty') }}</p>
-  {% else %}
-    <form method="post" action="/site-config/features" class="site-config__form">
-      {% set currentCategory = '' %}
-      {% for flag in flags %}
-        {% if flag.category != currentCategory %}
-          {% if not loop.first %}</fieldset>{% endif %}
-          <fieldset>
-            <legend>{{ flag.category }}</legend>
-          {% set currentCategory = flag.category %}
-        {% endif %}
-        <div class="form-field">
-          <label>
-            <input type="checkbox" name="feature_{{ flag.key }}"
-                   {% if config.features[flag.key] %}checked{% elif flag.default %}checked{% endif %}>
-            <strong>{{ flag.label }}</strong>
-            {% if flag.description %}<span class="hint">{{ flag.description }}</span>{% endif %}
-            {% if flag.requiresRestart %}<span class="badge">Restart required</span>{% endif %}
-          </label>
-        </div>
-      {% endfor %}
-      </fieldset>
-      <button type="submit" class="button">{{ __('siteConfig.common.save') }}</button>
-    </form>
-  {% endif %}
+<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 %}

package/views/site-config-identity.njk CHANGED Viewed

@@ -3,40 +3,170 @@
 {% block title %}{{ __('siteConfig.identity.title') }}{% endblock %}
 {% block content %}
-  <h1>{{ __('siteConfig.title') }}</h1>
-  {% include "partials/tab-strip.njk" %}
+<style>
+  .sc-dashboard {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xl, 2rem);
+  }
-  <form method="post" action="/site-config/identity" class="site-config__form">
-    <div class="form-field">
-      <label for="name">{{ __('siteConfig.identity.name') }}</label>
-      <input type="text" id="name" name="name" value="{{ config.identity.name }}" required>
-    </div>
-    <div class="form-field">
-      <label for="description">{{ __('siteConfig.identity.description') }}</label>
-      <textarea id="description" name="description" rows="2">{{ config.identity.description }}</textarea>
-    </div>
-    <div class="form-field">
-      <label for="tagline">{{ __('siteConfig.identity.tagline') }}</label>
-      <input type="text" id="tagline" name="tagline" value="{{ config.identity.tagline }}">
-    </div>
-    <div class="form-field">
-      <label for="defaultAuthor">{{ __('siteConfig.identity.defaultAuthor') }}</label>
-      <input type="text" id="defaultAuthor" name="defaultAuthor" value="{{ config.identity.defaultAuthor }}">
-    </div>
-    <div class="form-field">
-      <label for="defaultOgImage">{{ __('siteConfig.identity.defaultOgImage') }}</label>
-      <input type="url" id="defaultOgImage" name="defaultOgImage" value="{{ config.identity.defaultOgImage }}">
-    </div>
-    <div class="form-row">
-      <div class="form-field">
-        <label for="locale">{{ __('siteConfig.identity.locale') }}</label>
-        <input type="text" id="locale" name="locale" value="{{ config.identity.locale }}" maxlength="5">
+  .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);
+  }
+  /* Field grid for two-column layouts */
+  .hp-field-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-m, 1rem) var(--space-s, 0.75rem);
+  }
+  .hp-field-grid .field--full {
+    grid-column: 1 / -1;
+  }
+  @media (max-width: 640px) {
+    .hp-field-grid {
+      grid-template-columns: 1fr;
+    }
+    .hp-field-grid .field--full {
+      grid-column: 1;
+    }
+  }
+  /* Field styling */
+  .sc-dashboard .field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  .sc-dashboard .field__label {
+    display: block;
+    font: var(--font-caption, 0.75rem/1.4 sans-serif);
+    font-weight: 600;
+    color: var(--color-on-surface, inherit);
+  }
+  .sc-dashboard .field__input {
+    width: 100%;
+    padding: var(--space-2xs, 0.375rem) var(--space-xs, 0.5rem);
+    border: 1px solid var(--color-outline-variant, #ccc);
+    border-radius: var(--border-radius-small, 0.25rem);
+    font: var(--font-body, 0.875rem/1.5 sans-serif);
+    background: var(--color-background, #fff);
+    color: var(--color-on-surface, inherit);
+    transition: border-color 0.15s;
+  }
+  .sc-dashboard .field__input:focus {
+    outline: none;
+    border-color: var(--color-primary, #0066cc);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, #0066cc) 20%, transparent);
+  }
+  .sc-dashboard textarea.field__input {
+    resize: vertical;
+    min-height: 4.5rem;
+  }
+  .sc-dashboard .field__hint {
+    color: var(--color-on-offset, #888);
+    font: var(--font-caption, 0.75rem/1.4 sans-serif);
+    margin: 0;
+  }
+</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 %}
+<form method="post" action="/site-config/identity" class="sc-dashboard">
+  <section class="sc-section">
+    <h2>{{ __('siteConfig.identity.title') }}</h2>
+    <div class="hp-field-grid">
+      <div class="field field--full">
+        <label class="field__label" for="name">{{ __('siteConfig.identity.name') }}</label>
+        <input class="field__input" type="text" id="name" name="name"
+               value="{{ config.identity.name or '' }}" required>
+      </div>
+      <div class="field field--full">
+        <label class="field__label" for="description">{{ __('siteConfig.identity.description') }}</label>
+        <textarea class="field__input" id="description" name="description" rows="2">{{ config.identity.description or '' }}</textarea>
+      </div>
+      <div class="field field--full">
+        <label class="field__label" for="tagline">{{ __('siteConfig.identity.tagline') }}</label>
+        <input class="field__input" type="text" id="tagline" name="tagline"
+               value="{{ config.identity.tagline or '' }}">
+      </div>
+      <div class="field">
+        <label class="field__label" for="defaultAuthor">{{ __('siteConfig.identity.defaultAuthor') }}</label>
+        <input class="field__input" type="text" id="defaultAuthor" name="defaultAuthor"
+               value="{{ config.identity.defaultAuthor or '' }}">
       </div>
-      <div class="form-field">
-        <label for="timezone">{{ __('siteConfig.identity.timezone') }}</label>
-        <input type="text" id="timezone" name="timezone" value="{{ config.identity.timezone }}">
+      <div class="field">
+        <label class="field__label" for="defaultOgImage">{{ __('siteConfig.identity.defaultOgImage') }}</label>
+        <input class="field__input" type="url" id="defaultOgImage" name="defaultOgImage"
+               value="{{ config.identity.defaultOgImage or '' }}">
       </div>
+      <div class="field">
+        <label class="field__label" for="locale">{{ __('siteConfig.identity.locale') }}</label>
+        <input class="field__input" type="text" id="locale" name="locale"
+               value="{{ config.identity.locale or 'en' }}" maxlength="5">
+        <p class="field__hint">e.g. en, fr, en-GB</p>
+      </div>
+      <div class="field">
+        <label class="field__label" for="timezone">{{ __('siteConfig.identity.timezone') }}</label>
+        <input class="field__input" type="text" id="timezone" name="timezone"
+               value="{{ config.identity.timezone or 'UTC' }}">
+        <p class="field__hint">e.g. UTC, Europe/Paris, America/New_York</p>
+      </div>
     </div>
-    <button type="submit" class="button">{{ __('siteConfig.common.save') }}</button>
-  </form>
+  </section>
+  <div class="button-group">
+    <button type="submit" class="button button--primary">{{ __('siteConfig.common.save') }}</button>
+  </div>
+</form>
 {% endblock %}

package/views/site-config-layout.njk CHANGED Viewed

@@ -3,53 +3,229 @@
 {% block title %}{{ __('siteConfig.layout.title') }}{% endblock %}
 {% block content %}
-  <h1>{{ __('siteConfig.title') }}</h1>
-  {% include "partials/tab-strip.njk" %}
-  <form method="post" action="/site-config/layout" class="site-config__form">
-    <div class="form-field">
-      <label for="preset">{{ __('siteConfig.layout.preset') }}</label>
-      <select id="preset" name="preset">
-        {% for p in presets %}
-          <option value="{{ p }}" {% if config.layout.preset == p %}selected{% endif %}>{{ p }}</option>
-        {% endfor %}
-      </select>
-    </div>
-    <div class="form-field">
-      <label>
-        <input type="checkbox" name="sidebarEnabled" {% if config.layout.sidebarEnabled %}checked{% endif %}>
-        {{ __('siteConfig.layout.sidebarEnabled') }}
-      </label>
-    </div>
-    <div class="form-field">
-      <label for="sidebarSide">{{ __('siteConfig.layout.sidebarSide') }}</label>
-      <select id="sidebarSide" name="sidebarSide">
-        <option value="left" {% if config.layout.sidebarSide == 'left' %}selected{% endif %}>left</option>
-        <option value="right" {% if config.layout.sidebarSide == 'right' %}selected{% endif %}>right</option>
-      </select>
-    </div>
+<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);
+  }
+  /* Field grid for two-column layouts */
+  .hp-field-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--space-m, 1rem) var(--space-s, 0.75rem);
+  }
+  .hp-field-grid .field--full {
+    grid-column: 1 / -1;
+  }
+  @media (max-width: 640px) {
+    .hp-field-grid {
+      grid-template-columns: 1fr;
+    }
+    .hp-field-grid .field--full {
+      grid-column: 1;
+    }
+  }
+  /* Field styling */
+  .sc-dashboard .field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  .sc-dashboard .field__label {
+    display: block;
+    font: var(--font-caption, 0.75rem/1.4 sans-serif);
+    font-weight: 600;
+    color: var(--color-on-surface, inherit);
+  }
+  .sc-dashboard .field__input {
+    width: 100%;
+    padding: var(--space-2xs, 0.375rem) var(--space-xs, 0.5rem);
+    border: 1px solid var(--color-outline-variant, #ccc);
+    border-radius: var(--border-radius-small, 0.25rem);
+    font: var(--font-body, 0.875rem/1.5 sans-serif);
+    background: var(--color-background, #fff);
+    color: var(--color-on-surface, inherit);
+    transition: border-color 0.15s;
+  }
+  .sc-dashboard .field__input:focus {
+    outline: none;
+    border-color: var(--color-primary, #0066cc);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, #0066cc) 20%, transparent);
+  }
+  .sc-dashboard .field__hint {
+    color: var(--color-on-offset, #888);
+    font: var(--font-caption, 0.75rem/1.4 sans-serif);
+    margin: 0;
+  }
+  /* Checkbox toggle */
+  .sc-checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs, 0.5rem);
+    cursor: pointer;
+    font: var(--font-body, 0.875rem/1.5 sans-serif);
+  }
+  /* Nav items table */
+  .sc-nav-table {
+    width: 100%;
+    border-collapse: collapse;
+  }
-    <fieldset>
-      <legend>{{ __('siteConfig.layout.navItems') }}</legend>
-      <table class="form-table">
-        <thead>
-          <tr><th>Label</th><th>URL</th></tr>
-        </thead>
-        <tbody>
-          {% for item in config.layout.navItems %}
-            <tr>
-              <td><input type="text" name="navLabel" value="{{ item.label }}"></td>
-              <td><input type="text" name="navUrl" value="{{ item.url }}"></td>
-            </tr>
+  .sc-nav-table th {
+    text-align: left;
+    font: var(--font-caption, 0.75rem/1.4 sans-serif);
+    font-weight: 600;
+    color: var(--color-on-offset, #666);
+    padding: var(--space-xs, 0.5rem);
+    border-bottom: 2px solid var(--color-outline-variant, #ddd);
+  }
+  .sc-nav-table td {
+    padding: var(--space-xs, 0.5rem);
+    border-bottom: 1px solid var(--color-outline-variant, #eee);
+  }
+  .sc-nav-table td:last-child {
+    border-bottom-color: transparent;
+  }
+  .sc-nav-table input {
+    width: 100%;
+    padding: var(--space-2xs, 0.375rem) var(--space-xs, 0.5rem);
+    border: 1px solid var(--color-outline-variant, #ccc);
+    border-radius: var(--border-radius-small, 0.25rem);
+    font: var(--font-body, 0.875rem/1.5 sans-serif);
+    background: var(--color-background, #fff);
+    color: var(--color-on-surface, inherit);
+    transition: border-color 0.15s;
+  }
+  .sc-nav-table input:focus {
+    outline: none;
+    border-color: var(--color-primary, #0066cc);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, #0066cc) 20%, transparent);
+  }
+  .sc-nav-table tr:last-child td {
+    padding-top: var(--space-s, 0.75rem);
+  }
+</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 %}
+<form method="post" action="/site-config/layout" class="sc-dashboard">
+  {# Layout preset + sidebar #}
+  <section class="sc-section">
+    <h2>{{ __('siteConfig.layout.title') }}</h2>
+    <div class="hp-field-grid">
+      <div class="field">
+        <label class="field__label" for="preset">{{ __('siteConfig.layout.preset') }}</label>
+        <select class="field__input" id="preset" name="preset">
+          {% for p in presets %}
+            <option value="{{ p }}" {% if config.layout.preset == p %}selected{% endif %}>{{ p }}</option>
           {% endfor %}
+        </select>
+      </div>
+      <div class="field">
+        <span class="field__label">{{ __('siteConfig.layout.sidebarSide') }}</span>
+        <select class="field__input" id="sidebarSide" name="sidebarSide">
+          <option value="left"  {% if config.layout.sidebarSide == 'left' %}selected{% endif %}>Left</option>
+          <option value="right" {% if config.layout.sidebarSide == 'right' %}selected{% endif %}>Right</option>
+        </select>
+      </div>
+      <div class="field field--full">
+        <label class="sc-checkbox-label">
+          <input type="checkbox" name="sidebarEnabled"
+                 {% if config.layout.sidebarEnabled %}checked{% endif %}>
+          {{ __('siteConfig.layout.sidebarEnabled') }}
+        </label>
+      </div>
+    </div>
+  </section>
+  {# Navigation items #}
+  <section class="sc-section">
+    <h2>{{ __('siteConfig.layout.navItems') }}</h2>
+    <p class="sc-section__desc">Add navigation links. Leave empty rows blank — they will be ignored on save. Add a trailing row to create a new item.</p>
+    <table class="sc-nav-table">
+      <thead>
+        <tr>
+          <th>Label</th>
+          <th>URL</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for item in config.layout.navItems %}
           <tr>
-            <td><input type="text" name="navLabel" placeholder="New label"></td>
-            <td><input type="text" name="navUrl" placeholder="/path or https://..."></td>
+            <td><input type="text" name="navLabel" value="{{ item.label or '' }}" placeholder="Home"></td>
+            <td><input type="text" name="navUrl" value="{{ item.url or '' }}" placeholder="/path or https://..."></td>
           </tr>
-        </tbody>
-      </table>
-    </fieldset>
+        {% endfor %}
+        {# Trailing empty row for adding a new entry #}
+        <tr>
+          <td><input type="text" name="navLabel" value="" placeholder="New label"></td>
+          <td><input type="text" name="navUrl" value="" placeholder="/path or https://..."></td>
+        </tr>
+      </tbody>
+    </table>
+  </section>
+  <div class="button-group">
+    <button type="submit" class="button button--primary">{{ __('siteConfig.common.save') }}</button>
+  </div>
-    <button type="submit" class="button">{{ __('siteConfig.common.save') }}</button>
-  </form>
+</form>
 {% endblock %}