@commonpub/layer 0.1.0

package/components/editors/blocks/ImageBlock.vue

@@ -0,0 +1,271 @@
+<script setup lang="ts">
+/**
+ * Image block — upload placeholder or image preview with alt text and caption.
+ */
+const props = defineProps<{
+  content: Record<string, unknown>;
+}>();
+
+const emit = defineEmits<{
+  update: [content: Record<string, unknown>];
+}>();
+
+const src = computed(() => (props.content.src as string) ?? '');
+const alt = computed(() => (props.content.alt as string) ?? '');
+const caption = computed(() => (props.content.caption as string) ?? '');
+const hasImage = computed(() => !!src.value);
+
+function updateField(field: string, value: string): void {
+  emit('update', { ...props.content, [field]: value });
+}
+
+const uploading = ref(false);
+const uploadError = ref('');
+
+async function handleFileSelect(event: Event): Promise<void> {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  if (!file) return;
+
+  uploading.value = true;
+  uploadError.value = '';
+
+  try {
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('purpose', 'content');
+
+    const result = await $fetch<{ url: string; width: number | null; height: number | null }>('/api/files/upload', {
+      method: 'POST',
+      body: formData,
+    });
+
+    emit('update', {
+      src: result.url,
+      alt: alt.value || file.name.replace(/\.[^.]+$/, ''),
+      caption: caption.value,
+    });
+  } catch (err: unknown) {
+    uploadError.value = (err as { data?: { statusMessage?: string } })?.data?.statusMessage ?? 'Upload failed';
+  } finally {
+    uploading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="cpub-image-block">
+    <!-- No image — upload placeholder -->
+    <template v-if="!hasImage">
+      <label class="cpub-image-placeholder" :class="{ 'cpub-image-uploading': uploading }">
+        <input type="file" accept="image/*" class="cpub-sr-only" :disabled="uploading" @change="handleFileSelect" />
+        <template v-if="uploading">
+          <i class="fa-solid fa-circle-notch fa-spin cpub-image-placeholder-icon"></i>
+          <span class="cpub-image-placeholder-text">Uploading...</span>
+        </template>
+        <template v-else>
+          <i class="fa-regular fa-image cpub-image-placeholder-icon"></i>
+          <span class="cpub-image-placeholder-text">Click to upload image or drag and drop</span>
+          <span class="cpub-image-placeholder-hint">JPG, PNG, WebP, GIF · 10 MB max</span>
+        </template>
+      </label>
+      <div v-if="uploadError" class="cpub-image-error">{{ uploadError }}</div>
+      <div class="cpub-image-url-row">
+        <input
+          class="cpub-image-url-input"
+          type="url"
+          placeholder="Or paste image URL..."
+          :value="src"
+          @input="updateField('src', ($event.target as HTMLInputElement).value)"
+        />
+      </div>
+    </template>
+
+    <!-- Has image — show preview -->
+    <template v-else>
+      <div class="cpub-image-preview">
+        <img :src="src" :alt="alt" class="cpub-image-preview-img" />
+        <button class="cpub-image-remove" title="Remove image" @click="updateField('src', '')">
+          <i class="fa-solid fa-xmark"></i>
+        </button>
+      </div>
+      <div class="cpub-image-fields">
+        <input
+          class="cpub-image-field"
+          type="text"
+          :value="alt"
+          placeholder="Alt text (describes the image)..."
+          aria-label="Image alt text"
+          @input="updateField('alt', ($event.target as HTMLInputElement).value)"
+        />
+        <input
+          class="cpub-image-field"
+          type="text"
+          :value="caption"
+          placeholder="Caption (optional)..."
+          aria-label="Image caption"
+          @input="updateField('caption', ($event.target as HTMLInputElement).value)"
+        />
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.cpub-image-block {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.cpub-image-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 36px 24px;
+  border: 2px dashed var(--border2);
+  background: var(--surface2);
+  cursor: pointer;
+  transition: all 0.12s;
+}
+
+.cpub-image-placeholder:hover {
+  border-color: var(--accent);
+  background: var(--accent-bg);
+}
+
+.cpub-image-placeholder-icon {
+  font-size: 28px;
+  color: var(--text-faint);
+}
+
+.cpub-image-placeholder:hover .cpub-image-placeholder-icon {
+  color: var(--accent);
+}
+
+.cpub-image-placeholder-text {
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+.cpub-image-placeholder-hint {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-faint);
+}
+
+.cpub-image-uploading {
+  pointer-events: none;
+  opacity: 0.7;
+}
+
+.cpub-image-error {
+  padding: 6px 10px;
+  font-size: 11px;
+  color: var(--red);
+  background: var(--red-bg);
+  border: var(--border-width-default) solid var(--red-border);
+}
+
+.cpub-image-url-row {
+  padding: 8px 0 0;
+}
+
+.cpub-image-url-input {
+  width: 100%;
+  padding: 6px 10px;
+  font-size: 12px;
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  color: var(--text);
+  outline: none;
+}
+
+.cpub-image-url-input:focus {
+  border-color: var(--accent);
+}
+
+.cpub-image-url-input::placeholder {
+  color: var(--text-faint);
+}
+
+.cpub-image-preview {
+  position: relative;
+}
+
+.cpub-image-preview-img {
+  width: 100%;
+  max-height: 500px;
+  object-fit: contain;
+  display: block;
+  background: var(--surface2);
+  border: var(--border-width-default) solid var(--border);
+}
+
+.cpub-image-remove {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 28px;
+  height: 28px;
+  background: var(--text);
+  border: none;
+  color: var(--surface);
+  font-size: 12px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.12s;
+}
+
+.cpub-image-preview:hover .cpub-image-remove {
+  opacity: 1;
+}
+
+.cpub-image-remove:hover {
+  background: var(--red);
+}
+
+.cpub-image-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-top: 6px;
+}
+
+.cpub-image-field {
+  width: 100%;
+  padding: 5px 8px;
+  font-size: 11px;
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border2);
+  color: var(--text-dim);
+  outline: none;
+  font-style: italic;
+}
+
+.cpub-image-field:focus {
+  border-color: var(--accent);
+  color: var(--text);
+  font-style: normal;
+}
+
+.cpub-image-field::placeholder {
+  color: var(--text-faint);
+  font-style: italic;
+}
+
+.cpub-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+</style>

package/components/editors/blocks/MarkdownBlock.vue

@@ -0,0 +1,258 @@
+<script setup lang="ts">
+import { markdownToBlockTuples } from '@commonpub/editor';
+import type { BlockTuple } from '@commonpub/editor';
+
+const props = defineProps<{
+  content: { source: string };
+}>();
+
+const emit = defineEmits<{
+  update: [content: { source: string }];
+}>();
+
+/** Type-safe block content accessors — cast content to record for dynamic key access */
+function bStr(block: BlockTuple, key: string): string {
+  return String((block[1] as Record<string, unknown>)[key] ?? '');
+}
+function bNum(block: BlockTuple, key: string): number {
+  return Number((block[1] as Record<string, unknown>)[key]) || 0;
+}
+
+const viewMode = ref<'edit' | 'split' | 'preview'>('split');
+const source = ref(props.content.source || '');
+
+watch(() => props.content.source, (val) => {
+  if (val !== source.value) source.value = val;
+});
+
+const previewBlocks = computed(() => {
+  if (!source.value.trim()) return [];
+  try {
+    return markdownToBlockTuples(source.value);
+  } catch {
+    return [];
+  }
+});
+
+let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+function handleInput(): void {
+  if (debounceTimer) clearTimeout(debounceTimer);
+  debounceTimer = setTimeout(() => {
+    emit('update', { source: source.value });
+  }, 300);
+}
+
+onUnmounted(() => {
+  if (debounceTimer) clearTimeout(debounceTimer);
+});
+</script>
+
+<template>
+  <div class="md-block" :class="[`md-block--${viewMode}`]">
+    <div class="md-block-toolbar">
+      <span class="md-block-label"><i class="fa-brands fa-markdown"></i> Markdown</span>
+      <div class="md-block-modes">
+        <button :class="{ active: viewMode === 'edit' }" @click="viewMode = 'edit'" title="Edit">
+          <i class="fa-solid fa-code"></i>
+        </button>
+        <button :class="{ active: viewMode === 'split' }" @click="viewMode = 'split'" title="Split">
+          <i class="fa-solid fa-columns"></i>
+        </button>
+        <button :class="{ active: viewMode === 'preview' }" @click="viewMode = 'preview'" title="Preview">
+          <i class="fa-solid fa-eye"></i>
+        </button>
+      </div>
+    </div>
+
+    <div class="md-block-content">
+      <div v-if="viewMode !== 'preview'" class="md-block-editor">
+        <textarea
+          v-model="source"
+          class="md-block-textarea"
+          placeholder="Write markdown here..."
+          spellcheck="false"
+          @input="handleInput"
+        />
+      </div>
+
+      <div v-if="viewMode !== 'edit'" class="md-block-preview">
+        <div v-if="!previewBlocks.length" class="md-block-empty">
+          <i class="fa-solid fa-file-lines"></i>
+          <span>Preview will appear here</span>
+        </div>
+        <div v-else class="md-block-preview-blocks">
+          <div v-for="(block, i) in previewBlocks" :key="i" class="md-preview-block">
+            <template v-if="block[0] === 'heading'">
+              <component :is="`h${bNum(block, 'level')}`" class="md-preview-heading">
+                {{ bStr(block, 'text') }}
+              </component>
+            </template>
+            <template v-else-if="block[0] === 'text'">
+              <div class="md-preview-text" v-html="bStr(block, 'html')" />
+            </template>
+            <template v-else-if="block[0] === 'code'">
+              <pre class="md-preview-code"><code>{{ bStr(block, 'code') }}</code></pre>
+            </template>
+            <template v-else-if="block[0] === 'image'">
+              <figure class="md-preview-figure">
+                <img :src="bStr(block, 'src')" :alt="bStr(block, 'alt')" />
+              </figure>
+            </template>
+            <template v-else-if="block[0] === 'callout'">
+              <div :class="['md-preview-callout', `md-callout--${bStr(block, 'variant')}`]">
+                <div v-html="bStr(block, 'html')" />
+              </div>
+            </template>
+            <template v-else-if="block[0] === 'quote'">
+              <blockquote class="md-preview-quote" v-html="bStr(block, 'html')" />
+            </template>
+            <template v-else-if="block[0] === 'divider'">
+              <hr class="md-preview-hr" />
+            </template>
+            <template v-else>
+              <div class="md-preview-unknown">{{ block[0] }} block</div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.md-block {
+  border: var(--border-width-default) solid var(--border);
+  border-radius: 0;
+  background: var(--surface);
+  overflow: hidden;
+}
+
+.md-block-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px;
+  background: var(--surface2);
+  border-bottom: var(--border-width-default) solid var(--border);
+}
+
+.md-block-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-dim);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.md-block-modes {
+  display: flex;
+  gap: 2px;
+  background: var(--surface3);
+  border-radius: 0;
+  padding: 2px;
+}
+
+.md-block-modes button {
+  padding: 3px 8px;
+  border: none;
+  border-radius: 0;
+  background: none;
+  color: var(--text-faint);
+  cursor: pointer;
+  font-size: 11px;
+}
+
+.md-block-modes button.active {
+  background: var(--surface);
+  color: var(--text);
+  box-shadow: var(--shadow-sm);
+}
+
+.md-block-content {
+  display: flex;
+  min-height: 200px;
+}
+
+.md-block--edit .md-block-editor { flex: 1; }
+.md-block--preview .md-block-preview { flex: 1; }
+.md-block--split .md-block-editor { flex: 1; border-right: var(--border-width-default) solid var(--border); }
+.md-block--split .md-block-preview { flex: 1; }
+
+.md-block-textarea {
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  resize: vertical;
+  border: none;
+  outline: none;
+  padding: 12px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--text);
+  background: var(--bg);
+  tab-size: 2;
+}
+
+.md-block-preview {
+  padding: 12px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text);
+  overflow-y: auto;
+}
+
+.md-block-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 200px;
+  gap: 8px;
+  color: var(--text-faint);
+  font-size: 12px;
+}
+
+.md-preview-heading { margin-bottom: 8px; }
+.md-preview-text { margin-bottom: 8px; }
+.md-preview-code {
+  background: var(--surface2);
+  border: var(--border-width-default) solid var(--border);
+  border-radius: 0;
+  padding: 10px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  overflow-x: auto;
+  margin-bottom: 8px;
+}
+.md-preview-figure img { max-width: 100%; border-radius: 0; }
+.md-preview-callout {
+  padding: 10px 12px;
+  border-radius: 0;
+  border-left: 3px solid;
+  margin-bottom: 8px;
+  font-size: 12px;
+}
+.md-callout--info { background: var(--teal-bg); border-color: var(--teal); }
+.md-callout--tip { background: var(--green-bg); border-color: var(--green); }
+.md-callout--warning { background: var(--yellow-bg); border-color: var(--yellow); }
+.md-callout--danger { background: var(--red-bg); border-color: var(--red); }
+.md-preview-quote {
+  border-left: 3px solid var(--border);
+  padding-left: 12px;
+  color: var(--text-dim);
+  font-style: italic;
+  margin-bottom: 8px;
+}
+.md-preview-hr { border: none; border-top: var(--border-width-default) solid var(--border); margin: 12px 0; }
+.md-preview-unknown {
+  padding: 6px 10px;
+  background: var(--surface2);
+  border-radius: 0;
+  font-size: 11px;
+  color: var(--text-faint);
+  margin-bottom: 8px;
+}
+</style>

package/components/editors/blocks/MathBlock.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const props = defineProps<{ content: Record<string, unknown> }>();
+const emit = defineEmits<{ update: [content: Record<string, unknown>] }>();
+
+const expression = computed(() => (props.content.expression as string) ?? '');
+const notation = computed(() => (props.content.notation as string) ?? 'latex');
+
+function updateExpression(value: string): void {
+  emit('update', { ...props.content, expression: value });
+}
+</script>
+
+<template>
+  <div class="cpub-math-edit">
+    <div class="cpub-math-edit-header"><i class="fa-solid fa-square-root-variable"></i> Math Notation</div>
+    <div class="cpub-math-edit-body">
+      <textarea
+        class="cpub-math-textarea"
+        :value="expression"
+        placeholder="e.g. f(x) = \sum_{i=1}^{n} w_i \cdot x_i + b"
+        rows="3"
+        @input="updateExpression(($event.target as HTMLTextAreaElement).value)"
+      />
+      <div class="cpub-math-hint">Enter LaTeX or plain math notation</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-math-edit { border: var(--border-width-default) solid var(--border2); background: var(--surface); }
+.cpub-math-edit-header { padding: 8px 12px; font-size: 12px; font-weight: 600; background: var(--surface2); border-bottom: var(--border-width-default) solid var(--border2); display: flex; align-items: center; gap: 8px; }
+.cpub-math-edit-header i { color: var(--purple); }
+.cpub-math-edit-body { padding: 12px; }
+.cpub-math-textarea { width: 100%; font-family: var(--font-mono); font-size: 13px; background: var(--surface2); border: var(--border-width-default) solid var(--border2); padding: 8px; color: var(--text); outline: none; resize: vertical; }
+.cpub-math-textarea:focus { border-color: var(--accent); }
+.cpub-math-hint { font-size: 10px; color: var(--text-faint); margin-top: 4px; }
+</style>