@commonpub/layer 0.68.1 → 0.69.0

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

@@ -29,6 +29,8 @@ import {
   SHADOW_PRESETS,
   RATIOS,
   FONTS,
+  DESIGN_ARCHETYPES,
+  type DesignArchetype,
   defaultRecipe,
   type HarmonyScheme,
 } from '@commonpub/theme-studio';
@@ -75,6 +77,44 @@ const SCHEMES: { val: HarmonyScheme; label: string }[] = [
   { val: 'monochrome', label: 'Mono' },
 ];
 
+// --- Design-ethos archetype (Phase 3) ----------------------------------
+// Applies a whole structural preset (shape/shadow/border/type/density/texture)
+// while preserving the user's chosen color + mode, then tags the recipe.
+function applyArchetype(a: DesignArchetype): void {
+  recipe.value = { ...recipe.value, ...a.patch, archetype: a.k };
+}
+
+// --- Neutral temperature (Phase 2) -------------------------------------
+// Decouples surfaces/text from the accent hue. "Auto" = accent-tinted.
+type NeutralMode = 'auto' | 'pure' | 'warm' | 'cool';
+const NEUTRALS: { k: NeutralMode; label: string }[] = [
+  { k: 'auto', label: 'Auto' },
+  { k: 'pure', label: 'Pure' },
+  { k: 'warm', label: 'Warm' },
+  { k: 'cool', label: 'Cool' },
+];
+const neutralMode = computed<NeutralMode>(() => {
+  if (recipe.value.neutralHue === undefined && recipe.value.neutralSat === undefined) return 'auto';
+  if ((recipe.value.neutralSat ?? 0) === 0) return 'pure';
+  const h = recipe.value.neutralHue ?? 0;
+  return h < 120 || h >= 300 ? 'warm' : 'cool';
+});
+function setNeutral(m: NeutralMode): void {
+  if (m === 'auto') {
+    recipe.value.neutralHue = undefined;
+    recipe.value.neutralSat = undefined;
+  } else if (m === 'pure') {
+    recipe.value.neutralHue = 0;
+    recipe.value.neutralSat = 0;
+  } else if (m === 'warm') {
+    recipe.value.neutralHue = 30;
+    recipe.value.neutralSat = 8;
+  } else {
+    recipe.value.neutralHue = 220;
+    recipe.value.neutralSat = 8;
+  }
+}
+
 // --- Emit on every change ---------------------------------------------
 
 function emitGenerate(): void {
@@ -232,6 +272,24 @@ function finishWith(apply: boolean): void {
     <div class="cpub-studio-body">
       <!-- STEP 1: COLOR -->
       <div v-if="step === 0">
+        <div class="cpub-studio-arch">
+          <span class="cpub-studio-sublbl">Style <span class="cpub-studio-hint">sets shape, shadow, type &amp; feel</span></span>
+          <div class="cpub-studio-archgrid">
+            <button
+              v-for="a in DESIGN_ARCHETYPES"
+              :key="a.k"
+              type="button"
+              class="cpub-studio-archcard"
+              :class="{ on: recipe.archetype === a.k }"
+              :title="a.sub"
+              @click="applyArchetype(a)"
+            >
+              <span class="cpub-studio-archname">{{ a.label }}</span>
+              <span class="cpub-studio-archsub">{{ a.sub }}</span>
+            </button>
+          </div>
+        </div>
+
         <div class="cpub-studio-tabs">
           <button type="button" :class="{ on: colorTab === 'vibe' }" @click="colorTab = 'vibe'">By vibe</button>
           <button type="button" :class="{ on: colorTab === 'custom' }" @click="colorTab = 'custom'">My colors</button>
@@ -296,6 +354,12 @@ function finishWith(apply: boolean): void {
               <button v-for="sc in SCHEMES" :key="sc.val" type="button" :class="{ on: recipe.scheme === sc.val }" @click="recipe.scheme = sc.val">{{ sc.label }}</button>
             </span>
           </label>
+          <label class="cpub-studio-field">
+            <span class="cpub-studio-lbl">Neutral <span class="cpub-studio-hint">surface tint</span></span>
+            <span class="cpub-studio-seg">
+              <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">
@@ -502,6 +566,14 @@ function finishWith(apply: boolean): void {
 .cpub-studio-dots { display: flex; gap: 3px; }
 .cpub-studio-dots span { flex: 1; height: 14px; }
 
+.cpub-studio-arch { margin-bottom: var(--space-3); }
+.cpub-studio-archgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; }
+.cpub-studio-archcard { display: flex; flex-direction: column; gap: 2px; background: var(--surface2); border: var(--border-width-thin) solid var(--border2); padding: var(--space-2); cursor: pointer; text-align: left; }
+.cpub-studio-archcard:hover { border-color: var(--text-faint); }
+.cpub-studio-archcard.on { border-color: var(--accent); background: var(--accent-bg); }
+.cpub-studio-archname { font-family: var(--font-mono); font-size: var(--text-label); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text); }
+.cpub-studio-archsub { font-size: var(--text-label); color: var(--text-faint); line-height: var(--leading-tight); }
+
 .cpub-studio-sublbl { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-faint); margin: var(--space-4) 0 var(--space-2); }
 .cpub-studio-pallist, .cpub-studio-setlist { display: flex; flex-direction: column; gap: 6px; }
 .cpub-studio-palchip { display: flex; align-items: center; gap: var(--space-2); background: var(--surface2); border: var(--border-width-thin) solid var(--border2); padding: 6px 8px; cursor: pointer; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.68.1",
+  "version": "0.69.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -56,14 +56,14 @@
     "@commonpub/auth": "0.8.0",
     "@commonpub/config": "0.20.0",
     "@commonpub/docs": "0.6.3",
-    "@commonpub/learning": "0.5.2",
+    "@commonpub/protocol": "0.13.0",
     "@commonpub/explainer": "0.7.15",
-    "@commonpub/editor": "0.7.11",
+    "@commonpub/learning": "0.5.2",
+    "@commonpub/schema": "0.38.0",
     "@commonpub/server": "2.83.0",
-    "@commonpub/schema": "0.37.0",
-    "@commonpub/theme-studio": "0.3.0",
-    "@commonpub/ui": "0.12.0",
-    "@commonpub/protocol": "0.13.0"
+    "@commonpub/ui": "0.12.1",
+    "@commonpub/editor": "0.7.11",
+    "@commonpub/theme-studio": "0.4.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/theme/base.css

@@ -300,9 +300,35 @@ body {
 *::before,
 *::after {
   box-sizing: border-box;
+}
+
+/* Surface radius. Real UI surfaces (buttons, cards, inputs, tags, panels)
+ * inherit the theme's --radius. Structural, media, and decorative elements are
+ * reset to 0 below so a rounded theme (e.g. Stoa, --radius:12px) does NOT put
+ * radii on line breaks, dividers, rules, icons, images, table cells, or
+ * pseudo-element decorations — the "line breaks carry rounded corners" bug.
+ * (Elements that genuinely want rounding set it explicitly, e.g. avatars use
+ * --radius-full; an explicit class-level border-radius outranks these resets.) */
+* {
   border-radius: var(--radius);
 }
 
+hr,
+svg,
+img,
+picture,
+video,
+canvas,
+iframe,
+table, thead, tbody, tfoot, tr, td, th, caption, col, colgroup,
+::before,
+::after,
+::marker,
+::placeholder,
+.cpub-divider {
+  border-radius: 0;
+}
+
 /* === ACCESSIBILITY === */
 
 /* Skip-to-content link */