@commonpub/layer 0.54.0 → 0.55.0

package/components/contest/ContestStagesEditor.vue

@@ -190,6 +190,16 @@ const missingSubmission = computed(() => stages.value.length > 0 && !stages.valu
 </template>
 
 <style scoped>
+/* Self-contained form-control styles (tokenised) — Vue scoped CSS doesn't cross
+   component boundaries, so this extracted editor styles its own inputs rather than
+   relying on the parent page. Mirrors the contest pages' controls. */
+.cpub-form-field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
+.cpub-form-field:last-child { margin-bottom: 0; }
+.cpub-form-input, .cpub-form-textarea { width: 100%; padding: var(--space-2) var(--space-3); border: var(--border-width-default) solid var(--border); background: var(--surface); color: var(--text); font-size: var(--text-sm); font-family: var(--font-sans); }
+.cpub-form-input:focus, .cpub-form-textarea:focus { border-color: var(--accent); outline: none; box-shadow: var(--shadow-accent); }
+.cpub-form-textarea { resize: vertical; }
+.cpub-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
+
 .cpub-stages-standard { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
 .cpub-stage-tophead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
 .cpub-stage-count { font-size: 11px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.54.0",
+  "version": "0.55.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -55,14 +55,14 @@
     "zod": "^4.3.6",
     "@commonpub/auth": "0.8.0",
     "@commonpub/config": "0.18.0",
-    "@commonpub/editor": "0.7.11",
     "@commonpub/docs": "0.6.3",
-    "@commonpub/protocol": "0.13.0",
     "@commonpub/explainer": "0.7.15",
+    "@commonpub/protocol": "0.13.0",
+    "@commonpub/editor": "0.7.11",
     "@commonpub/learning": "0.5.2",
     "@commonpub/server": "2.77.0",
-    "@commonpub/ui": "0.9.2",
-    "@commonpub/schema": "0.30.0"
+    "@commonpub/schema": "0.30.0",
+    "@commonpub/ui": "0.9.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/contests/[slug]/edit.vue

@@ -574,9 +574,12 @@ async function transitionStatus(newStatus: string): Promise<void> {
 .cpub-edit-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 76px; }
 .cpub-form-section { border: var(--border-width-default) solid var(--border); background: var(--surface); padding: 20px; box-shadow: var(--shadow-md); }
 .cpub-form-section-title { font-size: 14px; font-weight: 700; margin-bottom: 14px; }
-/* `.cpub-form-input/-textarea/-field/-row/-label` are sourced from the global
-   theme (forms.css) so the extracted ContestStagesEditor inherits them across the
-   Vue scoped-style boundary — don't re-scope them here. */
+.cpub-form-field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
+.cpub-form-field:last-child { margin-bottom: 0; }
+.cpub-form-input, .cpub-form-textarea { width: 100%; padding: var(--space-2) var(--space-3); border: var(--border-width-default) solid var(--border); background: var(--surface); color: var(--text); font-size: var(--text-sm); font-family: var(--font-sans); }
+.cpub-form-input:focus, .cpub-form-textarea:focus { border-color: var(--accent); outline: none; box-shadow: var(--shadow-accent); }
+.cpub-form-textarea { resize: vertical; }
+.cpub-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
 
 .cpub-form-error { font-size: 12px; color: var(--red); margin-top: 8px; }
 .cpub-form-check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); cursor: pointer; }

package/pages/contests/create.vue

@@ -403,8 +403,12 @@ function prizeLabel(prize: Prize): string {
 .cpub-form-section-title { font-size: 14px; font-weight: 700; margin-bottom: 16px; }
 .cpub-form-section-header .cpub-form-section-title { margin-bottom: 0; }
 
-/* `.cpub-form-input/-textarea/-field/-row/-label` come from the global theme
-   (forms.css) — shared with the extracted ContestStagesEditor. */
+.cpub-form-field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
+.cpub-form-field:last-child { margin-bottom: 0; }
+.cpub-form-input, .cpub-form-textarea { width: 100%; padding: var(--space-2) var(--space-3); border: var(--border-width-default) solid var(--border); background: var(--surface); color: var(--text); font-size: var(--text-sm); font-family: var(--font-sans); }
+.cpub-form-input:focus, .cpub-form-textarea:focus { border-color: var(--accent); outline: none; box-shadow: var(--shadow-accent); }
+.cpub-form-textarea { resize: vertical; }
+.cpub-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
 
 .cpub-prize-card { border: var(--border-width-default) solid var(--border); padding: 14px; margin-bottom: 10px; background: var(--surface2); }
 .cpub-prize-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }