@commonpub/layer 0.8.0 → 0.8.2

package/components/editors/ArticleEditor.vue

@@ -82,25 +82,77 @@ function scrollToSection(sectionId: string): void {
 }
 
 // --- Assets ---
-const uploadedFiles = ref<Array<{ name: string; size: string; type: string }>>([]);
+const MAX_CONTENT_UPLOAD_MB = 10;
+const MAX_CONTENT_UPLOAD_BYTES = MAX_CONTENT_UPLOAD_MB * 1024 * 1024;
+
+interface UploadedAsset {
+  name: string;
+  size: string;
+  type: 'image' | 'file';
+  url: string;
+  mimeType: string;
+}
+
+const uploadedFiles = ref<UploadedAsset[]>([]);
+const uploadError = ref('');
+const uploading = ref(false);
 
 function onAssetUpload(event: Event): void {
   const input = event.target as HTMLInputElement;
   if (!input.files?.length) return;
   const file = input.files[0];
   if (!file) return;
+  uploadError.value = '';
+
+  // Client-side size check
+  if (file.size > MAX_CONTENT_UPLOAD_BYTES) {
+    uploadError.value = `File too large (${(file.size / 1024 / 1024).toFixed(1)} MB). Max ${MAX_CONTENT_UPLOAD_MB} MB.`;
+    input.value = '';
+    return;
+  }
+
+  uploading.value = true;
   const formData = new FormData();
   formData.append('file', file);
   formData.append('purpose', 'content');
-  $fetch<{ url: string; originalName: string; size: number }>('/api/files/upload', { method: 'POST', body: formData })
+  $fetch<{ url: string; originalName: string; sizeBytes: number; mimeType: string }>('/api/files/upload', { method: 'POST', body: formData })
     .then((res) => {
       uploadedFiles.value.unshift({
         name: res.originalName || file.name,
-        size: `${(res.size / 1024).toFixed(0)} KB`,
-        type: file.type.startsWith('image/') ? 'image' : 'file',
+        size: res.sizeBytes < 1024 * 1024
+          ? `${(res.sizeBytes / 1024).toFixed(0)} KB`
+          : `${(res.sizeBytes / 1024 / 1024).toFixed(1)} MB`,
+        type: (res.mimeType || file.type).startsWith('image/') ? 'image' : 'file',
+        url: res.url,
+        mimeType: res.mimeType || file.type,
       });
+      uploadError.value = '';
     })
-    .catch(() => { /* silent */ });
+    .catch((err) => {
+      uploadError.value = err?.data?.statusMessage || 'Upload failed';
+    })
+    .finally(() => {
+      uploading.value = false;
+      input.value = '';
+    });
+}
+
+function insertAsset(asset: UploadedAsset): void {
+  if (asset.type === 'image') {
+    // Insert image block after selected block (or at end)
+    const idx = props.blockEditor.selectedBlockId.value
+      ? props.blockEditor.getBlockIndex(props.blockEditor.selectedBlockId.value) + 1
+      : undefined;
+    props.blockEditor.addBlock('image', { url: asset.url, alt: asset.name }, idx);
+  } else {
+    // Copy URL to clipboard for non-image files
+    navigator.clipboard.writeText(asset.url).catch(() => {});
+    asset.name = `${asset.name} (copied!)`;
+    setTimeout(() => {
+      const found = uploadedFiles.value.find((f) => f.url === asset.url);
+      if (found) found.name = found.name.replace(' (copied!)', '');
+    }, 1500);
+  }
 }
 
 // --- Cover image ---
@@ -264,25 +316,34 @@ const canvasMaxWidth = computed(() => {
 
       <!-- Assets tab -->
       <div v-else class="cpub-ae-left-body">
-        <label class="cpub-ae-assets-drop">
-          <i class="fa-solid fa-cloud-arrow-up"></i>
-          <div class="cpub-ae-assets-drop-label">Drop files here</div>
-          <div class="cpub-ae-assets-drop-sub">JPG, PNG, GIF, SVG, PDF</div>
-          <input type="file" class="cpub-sr-only" @change="onAssetUpload">
+        <label class="cpub-ae-assets-drop" :class="{ 'cpub-ae-assets-uploading': uploading }">
+          <i :class="uploading ? 'fa-solid fa-spinner fa-spin' : 'fa-solid fa-cloud-arrow-up'"></i>
+          <div class="cpub-ae-assets-drop-label">{{ uploading ? 'Uploading...' : 'Drop files here' }}</div>
+          <div class="cpub-ae-assets-drop-sub">JPG, PNG, GIF, SVG, PDF — max {{ MAX_CONTENT_UPLOAD_MB }} MB</div>
+          <input type="file" class="cpub-sr-only" :disabled="uploading" @change="onAssetUpload">
         </label>
+        <div v-if="uploadError" class="cpub-ae-assets-error">
+          <i class="fa-solid fa-triangle-exclamation"></i> {{ uploadError }}
+        </div>
         <div v-if="uploadedFiles.length > 0" class="cpub-ae-assets-list">
           <div class="cpub-ae-assets-heading">Recent Uploads</div>
           <div
             v-for="(file, idx) in uploadedFiles"
             :key="idx"
             class="cpub-ae-asset-item"
+            :title="file.type === 'image' ? 'Click to insert image' : 'Click to copy URL'"
+            @click="insertAsset(file)"
           >
-            <div class="cpub-ae-asset-icon">
-              <i :class="file.type === 'image' ? 'fa-solid fa-image' : 'fa-solid fa-file'" />
+            <img v-if="file.type === 'image'" :src="file.url" :alt="file.name" class="cpub-ae-asset-thumb" />
+            <div v-else class="cpub-ae-asset-icon">
+              <i class="fa-solid fa-file" />
             </div>
             <div class="cpub-ae-asset-info">
               <div class="cpub-ae-asset-name">{{ file.name }}</div>
-              <div class="cpub-ae-asset-size">{{ file.size }}</div>
+              <div class="cpub-ae-asset-meta">
+                <span class="cpub-ae-asset-size">{{ file.size }}</span>
+                <span class="cpub-ae-asset-action">{{ file.type === 'image' ? 'insert' : 'copy url' }}</span>
+              </div>
             </div>
           </div>
         </div>
@@ -358,6 +419,21 @@ const canvasMaxWidth = computed(() => {
             <textarea class="cpub-ep-textarea" rows="3" :value="metadata.description as string" placeholder="Brief description shown in feed previews..." @input="updateMeta('description', ($event.target as HTMLTextAreaElement).value)" />
             <span class="cpub-ep-hint cpub-ep-hint-right">{{ ((metadata.description as string) || '').length }} / 300</span>
           </div>
+          <div class="cpub-ep-field">
+            <label class="cpub-ep-flabel">Category</label>
+            <select class="cpub-ep-select" :value="metadata.category || ''" @change="updateMeta('category', ($event.target as HTMLSelectElement).value)">
+              <option value="">Select category</option>
+              <option value="article">Article</option>
+              <option value="blog">Blog Post</option>
+              <option value="tutorial">Tutorial</option>
+              <option value="deep-dive">Deep Dive</option>
+              <option value="opinion">Opinion</option>
+              <option value="hardware">Hardware &amp; Makers</option>
+              <option value="software">Software</option>
+              <option value="ai-ml">AI &amp; Machine Learning</option>
+              <option value="homelab">Home Lab</option>
+            </select>
+          </div>
           <div class="cpub-ae-cover" :class="{ 'has-image': !!coverImageUrl }">
             <template v-if="coverImageUrl">
               <img :src="coverImageUrl" alt="Cover image" class="cpub-ae-cover-img" />
@@ -429,21 +505,6 @@ const canvasMaxWidth = computed(() => {
             <label class="cpub-ep-flabel">Visibility</label>
             <EditorVisibility :model-value="visibility" @update:model-value="onVisibilityUpdate" />
           </div>
-          <div class="cpub-ep-field">
-            <label class="cpub-ep-flabel">Category</label>
-            <select class="cpub-ep-select" :value="metadata.category || ''" @change="updateMeta('category', ($event.target as HTMLSelectElement).value)">
-              <option value="">Select category</option>
-              <option value="article">Article</option>
-              <option value="blog">Blog Post</option>
-              <option value="tutorial">Tutorial</option>
-              <option value="deep-dive">Deep Dive</option>
-              <option value="opinion">Opinion</option>
-              <option value="hardware">Hardware &amp; Makers</option>
-              <option value="software">Software</option>
-              <option value="ai-ml">AI &amp; Machine Learning</option>
-              <option value="homelab">Home Lab</option>
-            </select>
-          </div>
           <div class="cpub-ep-field">
             <label class="cpub-ep-flabel">Tags</label>
             <EditorTagInput :tags="tags" @update:tags="onTagsUpdate" />
@@ -505,15 +566,26 @@ const canvasMaxWidth = computed(() => {
   transition: border-color 0.15s, background 0.15s; text-align: center;
 }
 .cpub-ae-assets-drop:hover { border-color: var(--accent); background: var(--accent-bg); }
+.cpub-ae-assets-uploading { border-color: var(--accent); background: var(--accent-bg); pointer-events: none; }
 .cpub-ae-assets-drop i { font-size: 20px; color: var(--text-faint); }
 .cpub-ae-assets-drop-label { font-size: 11px; font-weight: 600; color: var(--text-dim); }
 .cpub-ae-assets-drop-sub { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); }
+.cpub-ae-assets-error {
+  margin: 4px 8px 8px; padding: 6px 10px; font-size: 10px; font-family: var(--font-mono);
+  color: var(--red); background: var(--red-bg); border: var(--border-width-default) solid var(--red);
+  display: flex; align-items: center; gap: 6px;
+}
 .cpub-ae-assets-list { padding: 8px 12px; }
 .cpub-ae-assets-heading { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); padding: 4px 0 10px; }
 .cpub-ae-asset-item {
   display: flex; align-items: center; gap: 10px; padding: 8px 10px;
   background: var(--surface); border: var(--border-width-default) solid var(--border); cursor: pointer;
-  box-shadow: var(--shadow-sm); margin-bottom: 5px;
+  box-shadow: var(--shadow-sm); margin-bottom: 5px; transition: background 0.1s, border-color 0.1s;
+}
+.cpub-ae-asset-item:hover { background: var(--surface2); border-color: var(--accent-border); }
+.cpub-ae-asset-thumb {
+  width: 34px; height: 34px; object-fit: cover; flex-shrink: 0;
+  border: var(--border-width-default) solid var(--border2);
 }
 .cpub-ae-asset-icon {
   width: 34px; height: 34px; background: var(--surface2); display: flex;
@@ -522,7 +594,12 @@ const canvasMaxWidth = computed(() => {
 .cpub-ae-asset-icon i { font-size: 11px; color: var(--text-faint); }
 .cpub-ae-asset-info { flex: 1; min-width: 0; }
 .cpub-ae-asset-name { font-size: 10px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
+.cpub-ae-asset-meta { display: flex; align-items: center; gap: 6px; }
 .cpub-ae-asset-size { font-family: var(--font-mono); font-size: 8px; color: var(--text-faint); }
+.cpub-ae-asset-action {
+  font-family: var(--font-mono); font-size: 8px; color: var(--accent);
+  text-transform: uppercase; letter-spacing: 0.05em;
+}
 
 /* Center */
 .cpub-ae-center { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

package/components/views/ArticleView.vue

@@ -30,11 +30,14 @@ const tocHeadings = computed(() => {
       const block = b as [string, Record<string, unknown>];
       return block[0] === 'heading';
     })
-    .map((b: unknown, idx: number) => {
+    .map((b: unknown) => {
       const block = b as [string, Record<string, unknown>];
+      const text = (block[1].text as string) || 'Untitled';
+      // Must match BlockHeadingView's slug generation
+      const slug = text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
       return {
-        id: `heading-${idx}`,
-        text: (block[1].text as string) || 'Untitled',
+        id: slug,
+        text,
         level: (block[1].level as number) || 2,
       };
     });
@@ -298,21 +301,18 @@ useJsonLd({
 
 <style scoped>
 /* ── TOC SIDEBAR ── */
-.cpub-article-toc-sidebar {
+.cpub-article-body-layout {
   display: none;
 }
 @media (min-width: 1200px) {
   .cpub-article-body-layout {
-    position: fixed;
-    right: max(24px, calc((100vw - 720px) / 2 - 240px));
-    top: 120px;
+    display: block;
+    position: absolute;
+    left: calc(100% + 32px);
+    top: 0;
     width: 200px;
-    z-index: 10;
-    pointer-events: none;
   }
   .cpub-article-toc-sidebar {
-    display: block;
-    pointer-events: auto;
     position: sticky;
     top: 80px;
   }
@@ -379,6 +379,7 @@ useJsonLd({
   max-width: 720px;
   margin: 0 auto;
   padding: 40px clamp(12px, 4vw, 24px) 80px;
+  position: relative;
 }
 
 /* ── TYPE BADGE ── */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -50,16 +50,16 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/auth": "0.5.0",
     "@commonpub/editor": "0.7.9",
-    "@commonpub/learning": "0.5.0",
     "@commonpub/config": "0.9.1",
+    "@commonpub/explainer": "0.7.10",
     "@commonpub/docs": "0.6.2",
-    "@commonpub/protocol": "0.9.8",
-    "@commonpub/schema": "0.9.6",
+    "@commonpub/auth": "0.5.0",
     "@commonpub/ui": "0.8.5",
+    "@commonpub/schema": "0.9.6",
+    "@commonpub/protocol": "0.9.8",
     "@commonpub/server": "2.28.0",
-    "@commonpub/explainer": "0.7.10"
+    "@commonpub/learning": "0.5.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",