@commonpub/layer 0.69.1 → 0.70.1

package/components/admin/theme/studio/AdminThemeStudio.vue

@@ -20,7 +20,10 @@ import {
   randomizeRecipe,
   randomName,
   buildPalette,
-  harmonyColors,
+  suggestPalettes,
+  type PaletteSuggestion,
+  hexToHsl,
+  hslToHex,
   contrast,
   wcag,
   COLOR_VIBES,
@@ -150,11 +153,35 @@ function palStrip(accent: string, scheme: HarmonyScheme, mode: 'light' | 'dark')
   const p = buildPalette({ accent, scheme, mode }).sem;
   return [p.bg, p.surface, p.accent, p.secondary, p.text];
 }
-/** The accent + its harmony companions — the "suggested family" strip. */
-const familyStrip = computed<string[]>(() => [
-  recipe.value.accent,
-  ...harmonyColors(recipe.value.accent, recipe.value.scheme),
-]);
+// --- Palette options + HSL accent control (Phase 4) -------------------
+// From the chosen accent, offer several ready-to-apply harmonized palettes
+// (choice over abstract knobs) + an HSL slider control (less janky than the
+// bare native swatch).
+const palettes = computed<PaletteSuggestion[]>(() => suggestPalettes(recipe.value.accent, recipe.value.mode));
+const activePalette = computed<string>(() => {
+  const r = recipe.value;
+  return (
+    palettes.value.find(
+      (p) =>
+        p.scheme === r.scheme &&
+        p.neutralHue === r.neutralHue &&
+        p.neutralSat === r.neutralSat &&
+        (p.secondary ?? undefined) === (r.secondary ?? undefined),
+    )?.k ?? ''
+  );
+});
+function applyPaletteSuggestion(p: PaletteSuggestion): void {
+  recipe.value.scheme = p.scheme;
+  recipe.value.neutralHue = p.neutralHue;
+  recipe.value.neutralSat = p.neutralSat;
+  recipe.value.secondary = p.secondary;
+  useSecondary.value = Boolean(p.secondary);
+}
+const accentHsl = computed(() => hexToHsl(recipe.value.accent));
+function setAccentHsl(part: 'h' | 's' | 'l', v: number): void {
+  const c = accentHsl.value;
+  recipe.value.accent = hslToHex(part === 'h' ? v : c.h, part === 's' ? v : c.s, part === 'l' ? v : c.l);
+}
 
 // --- Color actions -----------------------------------------------------
 
@@ -347,7 +374,31 @@ function finishWith(apply: boolean): void {
                 <input type="file" accept="image/*" hidden @change="onImagePick" />
               </label>
             </span>
+            <span class="cpub-studio-hslrow">
+              <span class="cpub-studio-hsl"><span>H</span><input type="range" min="0" max="360" :value="Math.round(accentHsl.h)" aria-label="Hue" @input="setAccentHsl('h', +($event.target as HTMLInputElement).value)" /></span>
+              <span class="cpub-studio-hsl"><span>S</span><input type="range" min="0" max="100" :value="Math.round(accentHsl.s)" aria-label="Saturation" @input="setAccentHsl('s', +($event.target as HTMLInputElement).value)" /></span>
+              <span class="cpub-studio-hsl"><span>L</span><input type="range" min="0" max="100" :value="Math.round(accentHsl.l)" aria-label="Lightness" @input="setAccentHsl('l', +($event.target as HTMLInputElement).value)" /></span>
+            </span>
           </label>
+          <div class="cpub-studio-field">
+            <span class="cpub-studio-lbl">Palette options <span class="cpub-studio-hint">from your accent</span></span>
+            <div class="cpub-studio-palopts">
+              <button
+                v-for="p in palettes"
+                :key="p.k"
+                type="button"
+                class="cpub-studio-palopt"
+                :class="{ on: activePalette === p.k }"
+                :title="p.label"
+                @click="applyPaletteSuggestion(p)"
+              >
+                <span class="cpub-studio-palopt-strip">
+                  <span v-for="(c, ci) in p.preview" :key="ci" :style="{ background: c }" />
+                </span>
+                <span class="cpub-studio-palopt-name">{{ p.label }}</span>
+              </button>
+            </div>
+          </div>
           <label class="cpub-studio-field">
             <span class="cpub-studio-lbl">Color family <span class="cpub-studio-hint">harmony</span></span>
             <span class="cpub-studio-seg cpub-studio-seg-wrap">
@@ -360,12 +411,6 @@ function finishWith(apply: boolean): void {
               <button v-for="n in NEUTRALS" :key="n.k" type="button" :class="{ on: neutralMode === n.k }" @click="setNeutral(n.k)">{{ n.label }}</button>
             </span>
           </label>
-          <div class="cpub-studio-field">
-            <span class="cpub-studio-lbl">Suggested family</span>
-            <span class="cpub-studio-family">
-              <span v-for="(c, i) in familyStrip" :key="i" :style="{ background: c }" :title="c" />
-            </span>
-          </div>
           <div class="cpub-studio-toggle-line">
             <span class="cpub-studio-lbl">Hand-pick secondary</span>
             <button type="button" class="cpub-studio-switch" :class="{ on: useSecondary }" :aria-pressed="useSecondary" @click="toggleSecondary" />
@@ -602,6 +647,19 @@ function finishWith(apply: boolean): void {
 .cpub-studio-colorrow { display: flex; gap: var(--space-2); align-items: center; }
 .cpub-studio-colorpick { width: 40px; height: 36px; padding: 0; border: var(--border-width-thin) solid var(--border2); background: none; cursor: pointer; flex-shrink: 0; }
 
+.cpub-studio-hslrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-top: 6px; }
+.cpub-studio-hsl { display: flex; align-items: center; gap: 4px; }
+.cpub-studio-hsl > span { font-family: var(--font-mono); font-size: var(--text-label); color: var(--text-faint); width: 10px; }
+.cpub-studio-hsl input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); }
+
+.cpub-studio-palopts { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px; }
+.cpub-studio-palopt { display: flex; flex-direction: column; gap: 4px; background: var(--surface2); border: var(--border-width-thin) solid var(--border2); padding: 5px; cursor: pointer; }
+.cpub-studio-palopt:hover { border-color: var(--text-faint); }
+.cpub-studio-palopt.on { border-color: var(--accent); background: var(--accent-bg); }
+.cpub-studio-palopt-strip { display: flex; height: 22px; overflow: hidden; }
+.cpub-studio-palopt-strip > span { flex: 1; }
+.cpub-studio-palopt-name { font-family: var(--font-mono); font-size: var(--text-label); color: var(--text-dim); text-align: center; }
+
 .cpub-studio-seg { display: grid; gap: 4px; grid-auto-flow: column; grid-auto-columns: 1fr; }
 .cpub-studio-seg-wrap { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); }
 .cpub-studio-seg button { background: var(--surface2); border: var(--border-width-thin) solid var(--border2); color: var(--text-dim); font-family: var(--font-mono); font-size: var(--text-label); font-weight: var(--font-weight-semibold); padding: 7px 4px; cursor: pointer; text-align: center; line-height: 1.2; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.69.1",
+  "version": "0.70.1",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -53,17 +53,17 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/auth": "0.8.0",
-    "@commonpub/config": "0.20.0",
     "@commonpub/editor": "0.7.11",
-    "@commonpub/schema": "0.38.0",
     "@commonpub/docs": "0.6.3",
-    "@commonpub/protocol": "0.13.0",
+    "@commonpub/config": "0.20.0",
     "@commonpub/learning": "0.5.2",
+    "@commonpub/auth": "0.8.0",
+    "@commonpub/protocol": "0.13.0",
     "@commonpub/server": "2.83.0",
-    "@commonpub/theme-studio": "0.4.1",
-    "@commonpub/ui": "0.12.1",
-    "@commonpub/explainer": "0.7.15"
+    "@commonpub/theme-studio": "0.5.1",
+    "@commonpub/ui": "0.12.2",
+    "@commonpub/explainer": "0.7.15",
+    "@commonpub/schema": "0.38.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/theme/base.css

@@ -209,6 +209,12 @@
   --shadow-lg: 6px 6px 0 var(--border);
   --shadow-xl: 8px 8px 0 var(--border);
   --shadow-accent: 4px 4px 0 var(--accent);
+  /* Component surface shadow. Built-in themes deliberately do NOT override these
+   * (only --shadow-* above), so buttons/cards keep the offset-block signature.
+   * Theme Studio emits them per the recipe's shadowStyle so a custom theme's
+   * buttons/cards reflect its archetype (neumorphic relief, soft blur, etc.). */
+  --shadow-block: 4px 4px 0 var(--border);
+  --shadow-block-sm: 2px 2px 0 var(--border);
 
   /* === TRANSITIONS === */
   --transition-fast: 0.1s ease;

package/theme/components.css

@@ -27,11 +27,11 @@
 .cpub-btn-primary {
   background: var(--accent);
   color: var(--color-text-inverse);
-  box-shadow: 4px 4px 0 var(--border);
+  box-shadow: var(--shadow-block);
 }
 
 .cpub-btn-primary:hover {
-  box-shadow: 2px 2px 0 var(--border);
+  box-shadow: var(--shadow-block-sm);
 }
 
 .cpub-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
@@ -40,9 +40,9 @@
   background: var(--secondary);
   color: var(--color-on-secondary);
   border-color: var(--secondary);
-  box-shadow: 4px 4px 0 var(--border);
+  box-shadow: var(--shadow-block);
 }
-.cpub-btn-secondary:hover { background: var(--secondary-hover); box-shadow: 2px 2px 0 var(--border); }
+.cpub-btn-secondary:hover { background: var(--secondary-hover); box-shadow: var(--shadow-block-sm); }
 .cpub-btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }
 
 .cpub-btn-sm { padding: 4px 10px; font-size: 11px; min-height: 44px; }
@@ -89,7 +89,7 @@
   border: var(--border-width-default) solid var(--border);
   padding: 16px;
   margin-bottom: 12px;
-  box-shadow: 4px 4px 0 var(--border);
+  box-shadow: var(--shadow-block);
 }
 
 .cpub-sb-title {
@@ -164,7 +164,7 @@
   border-color: var(--accent);
   background: var(--accent-bg);
   color: var(--accent);
-  box-shadow: 2px 2px 0 var(--border);
+  box-shadow: var(--shadow-block-sm);
 }
 
 .cpub-page-ellipsis {