@commonpub/layer 0.7.10 → 0.7.12

package/components/editors/DocsPageTree.vue

@@ -290,6 +290,7 @@ onUnmounted(() => {
       </button>
       <span v-else class="cpub-tree-toggle-spacer" />
 
+      <i class="fa-solid fa-grip-vertical cpub-tree-drag-handle" />
       <i class="fa-solid fa-file-lines cpub-tree-icon" />
       <span class="cpub-tree-title">{{ node.title || 'Untitled' }}</span>
 
@@ -424,6 +425,19 @@ onUnmounted(() => {
   flex-shrink: 0;
 }
 
+.cpub-tree-drag-handle {
+  font-size: 9px;
+  color: var(--text-faint);
+  opacity: 0;
+  cursor: grab;
+  flex-shrink: 0;
+  transition: opacity 0.12s;
+}
+
+.cpub-tree-drag-handle:active { cursor: grabbing; }
+.cpub-tree-item:hover .cpub-tree-drag-handle { opacity: 0.6; }
+.cpub-tree-item-selected .cpub-tree-drag-handle { opacity: 0.8; }
+
 .cpub-tree-icon {
   font-size: 11px;
   color: var(--text-faint);

package/components/views/ArticleView.vue

@@ -766,19 +766,24 @@ useJsonLd({
 }
 
 /* ── RESPONSIVE ── */
-@media (max-width: 640px) {
-  .cpub-article-wrap {
-    padding: 24px 16px 48px;
-  }
-  .cpub-related-grid {
-    grid-template-columns: 1fr;
-  }
-  .cpub-engagement-row {
-    flex-wrap: wrap;
-  }
-  .cpub-author-card {
-    flex-direction: column;
-    gap: 16px;
-  }
+@media (max-width: 768px) {
+  .cpub-article-wrap { padding: 24px 16px 48px; }
+  .cpub-article-title { font-size: 22px; }
+  .cpub-article-lead { font-size: 14px; margin-bottom: 16px; }
+  .cpub-related-grid { grid-template-columns: 1fr 1fr; }
+  .cpub-engagement-row { flex-wrap: wrap; gap: 6px; }
+  .cpub-engage-btn { padding: 8px 12px; min-height: 36px; }
+  .cpub-engage-sep { display: none; }
+  .cpub-tag-link { padding: 4px 10px; font-size: 11px; min-height: 28px; display: inline-flex; align-items: center; }
+}
+
+@media (max-width: 480px) {
+  .cpub-article-wrap { padding: 16px 12px 40px; }
+  .cpub-article-title { font-size: 20px; }
+  .cpub-article-lead { font-size: 13px; }
+  .cpub-related-grid { grid-template-columns: 1fr; }
+  .cpub-author-card { flex-direction: column; gap: 12px; }
+  .cpub-engage-btn { font-size: 11px; }
+  .cpub-meta-row { font-size: 10px; flex-wrap: wrap; gap: 6px; }
 }
 </style>

package/components/views/BlogView.vue

@@ -685,19 +685,23 @@ const hasSeries = computed(() => !!seriesTitle.value && seriesTotalParts.value >
 .cpub-btn-sm { padding: 4px 10px; font-size: 11px; }
 
 /* ── RESPONSIVE ── */
-@media (max-width: 640px) {
-  .cpub-blog-wrap {
-    padding: 24px 16px 48px;
-  }
-  .cpub-engagement-row {
-    flex-wrap: wrap;
-  }
-  .cpub-series-nav-btns {
-    grid-template-columns: 1fr;
-  }
-  .cpub-author-card {
-    flex-direction: column;
-    gap: 16px;
-  }
+@media (max-width: 768px) {
+  .cpub-blog-wrap { padding: 24px 16px 48px; }
+  .cpub-blog-title { font-size: 22px; }
+  .cpub-engagement-row { flex-wrap: wrap; gap: 6px; }
+  .cpub-engage-btn { padding: 8px 12px; min-height: 36px; }
+  .cpub-engage-sep { display: none; }
+  .cpub-series-nav-btns { grid-template-columns: 1fr; }
+  .cpub-series-nav-btn { padding: 12px; min-height: 44px; }
+  .cpub-tag-link { padding: 4px 10px; font-size: 11px; min-height: 28px; display: inline-flex; align-items: center; }
+}
+
+@media (max-width: 480px) {
+  .cpub-blog-wrap { padding: 16px 12px 40px; }
+  .cpub-blog-title { font-size: 20px; }
+  .cpub-blog-lead { font-size: 13px; }
+  .cpub-author-card { flex-direction: column; gap: 12px; }
+  .cpub-engage-btn { font-size: 11px; }
+  .cpub-hero-cover { max-height: 280px; }
 }
 </style>

package/components/views/ExplainerView.vue

@@ -775,6 +775,24 @@ onUnmounted(() => { document.removeEventListener('keydown', onKeydown); });
   .cpub-mobile-author { display: flex; }
   .cpub-content-wrap { padding: 24px 16px 48px; }
   .cpub-section-nav { flex-direction: column; gap: 16px; }
-  .cpub-section-title { font-size: 24px; }
+  .cpub-section-title { font-size: 22px; }
+  .cpub-explainer-topbar { gap: 6px; padding: 0 10px; }
+  .cpub-explainer-badge { display: none; }
+  .cpub-topbar-title { font-size: 12px; }
+  .cpub-topbar-divider { display: none; }
+  .cpub-progress-text { font-size: 10px; }
+  .cpub-icon-btn { width: 34px; height: 34px; }
+  .cpub-progress-dots { display: none; }
+}
+
+@media (max-width: 480px) {
+  .cpub-content-wrap { padding: 16px 12px 40px; }
+  .cpub-section-title { font-size: 18px; }
+  .cpub-section-body { font-size: 14px; }
+  .cpub-section-num-badge { width: 28px; height: 28px; font-size: 11px; }
+  .cpub-icon-btn { width: 36px; height: 36px; }
+  .cpub-nav-btn-group { gap: 2px; }
+  .cpub-section-nav-btn { padding: 12px; font-size: 12px; min-height: 44px; }
+  .cpub-prev-btn { min-height: 44px; padding: 10px 16px; }
 }
 </style>

package/components/views/ProjectView.vue

@@ -1510,8 +1510,33 @@ async function handleBuild(): Promise<void> {
   .cpub-toc-col { display: none; }
 }
 
-@media (max-width: 640px) {
+@media (max-width: 768px) {
   .cpub-page-outer { padding: 0 16px; }
-  .cpub-hero-cover { height: 180px; }
+  .cpub-hero-cover { height: 200px; }
+  .cpub-project-title { font-size: 18px; }
+  .cpub-project-desc { font-size: 13px; }
+  .cpub-tabs-strip { padding: 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
+  .cpub-tabs-inner { max-width: none; padding: 0; }
+  .cpub-tab { padding: 10px 12px; font-size: 11px; white-space: nowrap; }
+  .cpub-engagement-row { flex-wrap: wrap; gap: 6px; }
+  .cpub-engage-btn { padding: 8px 12px; min-height: 36px; }
+  .cpub-engage-sep { display: none; }
+  .cpub-content-area { padding: 0 16px; }
+  .cpub-sidebar { position: static; }
+  .cpub-author-tags .cpub-author-tag { padding: 2px 8px; font-size: 10px; }
+}
+
+@media (max-width: 480px) {
+  .cpub-page-outer { padding: 0 12px; }
+  .cpub-hero-cover { height: 160px; }
+  .cpub-project-title { font-size: 16px; }
+  .cpub-project-desc { font-size: 12px; line-height: 1.5; }
+  .cpub-project-meta { padding: 16px 0 0; }
+  .cpub-breadcrumbs { font-size: 10px; padding: 10px 0 8px; }
+  .cpub-tab { padding: 8px 10px; font-size: 10px; }
+  .cpub-engage-btn { font-size: 11px; padding: 8px 10px; }
+  .cpub-author-row { gap: 8px; }
+  .cpub-author-detail { font-size: 10px; }
+  .cpub-toc-item { padding: 6px 0 6px 10px; font-size: 11px; min-height: 36px; display: flex; align-items: center; }
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.7.10",
+  "version": "0.7.12",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -51,15 +51,15 @@
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
     "@commonpub/config": "0.9.0",
-    "@commonpub/editor": "0.7.3",
     "@commonpub/auth": "0.5.0",
+    "@commonpub/editor": "0.7.4",
     "@commonpub/docs": "0.6.2",
-    "@commonpub/schema": "0.9.4",
-    "@commonpub/server": "2.27.6",
-    "@commonpub/explainer": "0.7.5",
+    "@commonpub/explainer": "0.7.6",
     "@commonpub/learning": "0.5.0",
+    "@commonpub/schema": "0.9.4",
     "@commonpub/protocol": "0.9.7",
-    "@commonpub/ui": "0.8.5"
+    "@commonpub/ui": "0.8.5",
+    "@commonpub/server": "2.27.6"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

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

@@ -553,4 +553,34 @@ async function submitEntry(): Promise<void> {
   font-size: 11px; color: var(--text-dim); margin-left: auto; font-family: var(--font-mono);
 }
 .cpub-admin-status strong { color: var(--accent); text-transform: capitalize; }
+
+/* ── RESPONSIVE ── */
+@media (max-width: 768px) {
+  .cpub-hero { padding: 32px 0 28px; }
+  .cpub-hero-inner { padding: 0 16px; }
+  .cpub-hero-title { font-size: 24px; }
+  .cpub-hero-tagline { font-size: 13px; }
+  .cpub-hero-meta { flex-wrap: wrap; gap: 10px; }
+  .cpub-contest-main { padding: 20px 16px; }
+  .cpub-contest-layout { grid-template-columns: 1fr; }
+  .cpub-prize-grid { grid-template-columns: 1fr; }
+  .cpub-judges-grid { grid-template-columns: 1fr 1fr; }
+  .cpub-entry-grid { grid-template-columns: 1fr; }
+  .cpub-countdown-block { padding: 8px 12px; min-width: 48px; }
+  .cpub-countdown-val { font-size: 20px; }
+}
+
+@media (max-width: 480px) {
+  .cpub-hero-title { font-size: 20px; }
+  .cpub-hero-tagline { font-size: 12px; margin-bottom: 16px; }
+  .cpub-hero-stats { flex-wrap: wrap; gap: 16px; }
+  .cpub-hero-stat-val { font-size: 16px; }
+  .cpub-contest-main { padding: 16px 12px; }
+  .cpub-judges-grid { grid-template-columns: 1fr; }
+  .cpub-prize-additional { grid-template-columns: 1fr; }
+  .cpub-sponsor-grid { grid-template-columns: 1fr; }
+  .cpub-countdown-row { flex-wrap: wrap; justify-content: center; }
+  .cpub-hero-cta { flex-direction: column; align-items: stretch; }
+  .cpub-total-prize { border-left: none; padding-left: 0; justify-content: center; }
+}
 </style>

package/pages/dashboard.vue

@@ -599,5 +599,15 @@ async function deleteItem(id: string, title: string): Promise<void> {
     width: 100%;
     margin-top: 4px;
   }
+  .cpub-dash-action-btn {
+    padding: 6px 10px;
+    min-height: 32px;
+  }
+}
+
+@media (max-width: 480px) {
+  .cpub-dash { padding: 16px 12px; }
+  .cpub-dash-stat { min-width: 50%; padding: 12px 10px; }
+  .cpub-dash-tab { padding: 8px 12px; font-size: 11px; }
 }
 </style>

package/pages/hubs/[slug]/posts/[postId].vue

@@ -440,4 +440,18 @@ useSeoMeta({
   color: var(--text-faint); padding: 2px 0;
 }
 .cpub-reply-btn:hover { color: var(--accent); }
+
+/* ── RESPONSIVE ── */
+@media (max-width: 480px) {
+  .cpub-post-page { padding: 16px 12px; }
+  .cpub-post-card { padding: 14px; }
+  .cpub-post-content { font-size: 14px; }
+  .cpub-post-actions { flex-wrap: wrap; gap: 6px; }
+  .cpub-post-action-btn { padding: 6px 10px; min-height: 32px; }
+  .cpub-reply-nested { margin-left: 12px; }
+  .cpub-reply { padding: 10px 12px; }
+  .cpub-reply-row { flex-direction: column; }
+  .cpub-reply-input { width: 100%; }
+  .cpub-post-mod-bar { flex-wrap: wrap; }
+}
 </style>

package/pages/search.vue

@@ -752,6 +752,11 @@ const { data: relatedCommunities } = await useFetch('/api/hubs', {
   }
 }
 
+@media (max-width: 480px) {
+  .cpub-page-shell { padding: 12px; gap: 16px; }
+  .cpub-search-hero { padding: 12px 12px 0; }
+}
+
 /* ── COMMUNITY RESULT CARDS ── */
 .cpub-search-hub-card {
   display: flex;

package/pages/u/[username]/index.vue

@@ -869,4 +869,12 @@ async function handleReport(): Promise<void> {
     grid-template-columns: 1fr;
   }
 }
+
+@media (max-width: 480px) {
+  .cpub-profile-tabs-inner { padding: 0 12px; }
+  .cpub-profile-main { padding: 16px 12px; }
+  .cpub-profile-tab { padding: 10px 10px; font-size: 11px; min-height: 40px; }
+  .cpub-profile-stat { min-width: 100%; padding: 10px 16px; }
+  .cpub-profile-name { font-size: 18px; }
+}
 </style>