@commonpub/layer 0.1.0

package/components/editors/blocks/CheckpointBlock.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const props = defineProps<{ content: Record<string, unknown> }>();
+const emit = defineEmits<{ update: [content: Record<string, unknown>] }>();
+
+const label = computed(() => (props.content.label as string) ?? '');
+
+function updateLabel(value: string): void {
+  emit('update', { ...props.content, label: value });
+}
+</script>
+
+<template>
+  <div class="cpub-checkpoint-edit">
+    <div class="cpub-checkpoint-edit-header"><i class="fa-solid fa-circle-check"></i> Checkpoint</div>
+    <div class="cpub-checkpoint-edit-body">
+      <input class="cpub-checkpoint-input" :value="label" placeholder="e.g. Section 1 complete — you understand backpropagation!" @input="updateLabel(($event.target as HTMLInputElement).value)" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-checkpoint-edit { border: var(--border-width-default) solid var(--green-border); background: var(--surface); }
+.cpub-checkpoint-edit-header { padding: 8px 12px; font-size: 12px; font-weight: 600; background: var(--green-bg); border-bottom: var(--border-width-default) solid var(--green-border); display: flex; align-items: center; gap: 8px; color: var(--green); }
+.cpub-checkpoint-edit-body { padding: 12px; }
+.cpub-checkpoint-input { width: 100%; font-size: 13px; background: transparent; border: none; border-bottom: var(--border-width-default) solid var(--border2); padding: 6px 0; outline: none; color: var(--text); }
+.cpub-checkpoint-input::placeholder { color: var(--text-faint); }
+</style>

package/components/editors/blocks/CodeBlock.vue

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+/**
+ * Code block — textarea with language selector, filename, and copy button.
+ * Styled to match the mockup's dark terminal aesthetic.
+ */
+const props = defineProps<{
+  content: Record<string, unknown>;
+}>();
+
+const emit = defineEmits<{
+  update: [content: Record<string, unknown>];
+}>();
+
+const code = computed(() => (props.content.code as string) ?? '');
+const language = computed(() => (props.content.language as string) ?? '');
+const filename = computed(() => (props.content.filename as string) ?? '');
+
+const languages = [
+  '', 'javascript', 'typescript', 'python', 'c', 'cpp', 'rust', 'go',
+  'java', 'bash', 'html', 'css', 'json', 'yaml', 'sql', 'markdown',
+];
+
+const copied = ref(false);
+
+function updateField(field: string, value: string): void {
+  emit('update', { ...props.content, [field]: value });
+}
+
+async function copyCode(): Promise<void> {
+  try {
+    await navigator.clipboard.writeText(code.value);
+    copied.value = true;
+    setTimeout(() => { copied.value = false; }, 1500);
+  } catch {
+    // clipboard API not available
+  }
+}
+</script>
+
+<template>
+  <div class="cpub-code-block">
+    <div class="cpub-code-header">
+      <select
+        class="cpub-code-lang"
+        :value="language"
+        aria-label="Programming language"
+        @change="updateField('language', ($event.target as HTMLSelectElement).value)"
+      >
+        <option v-for="lang in languages" :key="lang" :value="lang">
+          {{ lang || 'Plain text' }}
+        </option>
+      </select>
+      <input
+        class="cpub-code-filename"
+        type="text"
+        :value="filename"
+        placeholder="filename.ext"
+        aria-label="Filename"
+        @input="updateField('filename', ($event.target as HTMLInputElement).value)"
+      />
+      <button class="cpub-code-copy" @click="copyCode">
+        <i :class="copied ? 'fa-solid fa-check' : 'fa-regular fa-copy'"></i>
+        {{ copied ? 'Copied' : 'Copy' }}
+      </button>
+    </div>
+    <textarea
+      class="cpub-code-body"
+      :value="code"
+      placeholder="// Write your code here..."
+      spellcheck="false"
+      aria-label="Code content"
+      @input="updateField('code', ($event.target as HTMLTextAreaElement).value)"
+    />
+  </div>
+</template>
+
+<style scoped>
+/* Dark code editor context — scoped white-on-dark tokens */
+.cpub-code-block {
+  --code-fg-faint: rgba(255, 255, 255, 0.2);
+  --code-fg-dim: rgba(255, 255, 255, 0.5);
+  --code-fg: rgba(255, 255, 255, 0.8);
+  --code-border: rgba(255, 255, 255, 0.15);
+  --code-surface: rgba(255, 255, 255, 0.08);
+  --code-surface-dim: rgba(255, 255, 255, 0.04);
+
+  background: var(--text);
+  border: var(--border-width-default) solid var(--border);
+  overflow: hidden;
+}
+
+.cpub-code-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--code-surface-dim);
+  border-bottom: var(--border-width-default) solid var(--code-surface);
+}
+
+.cpub-code-lang {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--accent);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+  padding: 2px 4px;
+}
+
+.cpub-code-lang option {
+  background: var(--text);
+  color: var(--surface);
+}
+
+.cpub-code-filename {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-faint);
+  background: transparent;
+  border: none;
+  outline: none;
+  flex: 1;
+  padding: 2px 4px;
+}
+
+.cpub-code-filename::placeholder {
+  color: var(--code-fg-faint);
+}
+
+.cpub-code-copy {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--code-fg-dim);
+  background: transparent;
+  border: var(--border-width-default) solid var(--code-border);
+  padding: 3px 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  transition: all 0.1s;
+}
+
+.cpub-code-copy:hover {
+  color: var(--code-fg);
+  background: var(--code-surface);
+}
+
+.cpub-code-body {
+  width: 100%;
+  min-height: 120px;
+  padding: 14px 16px;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--surface);
+  background: transparent;
+  border: none;
+  outline: none;
+  resize: vertical;
+  tab-size: 2;
+  white-space: pre;
+  overflow-x: auto;
+}
+
+.cpub-code-body::placeholder {
+  color: var(--code-fg-faint);
+}
+</style>

package/components/editors/blocks/DividerBlock.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+/**
+ * Divider block — horizontal rule. No editing needed.
+ */
+</script>
+
+<template>
+  <div class="cpub-divider-block">
+    <hr class="cpub-divider-line" />
+  </div>
+</template>
+
+<style scoped>
+.cpub-divider-block {
+  padding: 8px 0;
+}
+
+.cpub-divider-line {
+  border: none;
+  border-top: var(--border-width-default) solid var(--border2);
+}
+</style>

package/components/editors/blocks/DownloadsBlock.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const props = defineProps<{ content: Record<string, unknown> }>();
+const emit = defineEmits<{ update: [content: Record<string, unknown>] }>();
+interface FileItem { name: string; url: string; size?: string; type?: string; }
+const files = computed(() => (props.content.files as FileItem[]) ?? []);
+function addFile(): void { emit('update', { files: [...files.value, { name: '', url: '' }] }); }
+function removeFile(i: number): void { emit('update', { files: files.value.filter((_: FileItem, idx: number) => idx !== i) }); }
+function updateFile(i: number, field: string, value: string): void {
+  const updated = [...files.value];
+  updated[i] = { ...updated[i]!, [field]: value };
+  emit('update', { files: updated });
+}
+</script>
+<template>
+  <div class="cpub-downloads-block">
+    <div class="cpub-dl-header"><i class="fa-solid fa-download"></i> Downloads <button class="cpub-dl-add" @click="addFile"><i class="fa-solid fa-plus"></i></button></div>
+    <div v-for="(file, i) in files" :key="i" class="cpub-dl-item">
+      <i class="fa-solid fa-file cpub-dl-file-icon"></i>
+      <input class="cpub-dl-name" :value="file.name" placeholder="Filename..." @input="updateFile(i, 'name', ($event.target as HTMLInputElement).value)" />
+      <input class="cpub-dl-url" :value="file.url" placeholder="URL..." @input="updateFile(i, 'url', ($event.target as HTMLInputElement).value)" />
+      <button class="cpub-dl-remove" @click="removeFile(i)"><i class="fa-solid fa-xmark"></i></button>
+    </div>
+    <div v-if="files.length === 0" class="cpub-dl-empty" @click="addFile"><i class="fa-solid fa-plus"></i> Add downloadable file</div>
+  </div>
+</template>
+<style scoped>
+.cpub-downloads-block { border: var(--border-width-default) solid var(--border2); background: var(--surface); }
+.cpub-dl-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-dl-header i { color: var(--accent); }
+.cpub-dl-add { margin-left: auto; background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 11px; }
+.cpub-dl-add:hover { color: var(--accent); }
+.cpub-dl-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: var(--border-width-default) solid var(--border2); }
+.cpub-dl-file-icon { color: var(--text-faint); font-size: 12px; }
+.cpub-dl-name { flex: 1; font-size: 12px; font-weight: 500; background: transparent; border: none; outline: none; color: var(--text); }
+.cpub-dl-url { flex: 2; font-size: 11px; background: transparent; border: none; outline: none; color: var(--text-dim); font-family: var(--font-mono); }
+.cpub-dl-name::placeholder, .cpub-dl-url::placeholder { color: var(--text-faint); }
+.cpub-dl-remove { background: none; border: none; color: var(--text-faint); cursor: pointer; }
+.cpub-dl-remove:hover { color: var(--red); }
+.cpub-dl-empty { padding: 20px; text-align: center; font-size: 12px; color: var(--text-faint); cursor: pointer; }
+.cpub-dl-empty:hover { color: var(--accent); }
+</style>

package/components/editors/blocks/EmbedBlock.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const props = defineProps<{ content: Record<string, unknown> }>();
+const emit = defineEmits<{ update: [content: Record<string, unknown>] }>();
+const url = computed(() => (props.content.url as string) ?? '');
+function updateField(field: string, value: string): void { emit('update', { ...props.content, [field]: value }); }
+</script>
+<template>
+  <div class="cpub-embed-block">
+    <div class="cpub-embed-header"><i class="fa-solid fa-globe"></i> Embed</div>
+    <input class="cpub-embed-url" type="url" :value="url" placeholder="Paste embed URL..." @input="updateField('url', ($event.target as HTMLInputElement).value)" />
+  </div>
+</template>
+<style scoped>
+.cpub-embed-block { border: var(--border-width-default) solid var(--border2); background: var(--surface); }
+.cpub-embed-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-embed-header i { color: var(--accent); }
+.cpub-embed-url { width: 100%; padding: 8px 12px; font-size: 12px; background: transparent; border: none; color: var(--text); outline: none; }
+.cpub-embed-url:focus { background: var(--accent-bg); }
+.cpub-embed-url::placeholder { color: var(--text-faint); }
+</style>

package/components/editors/blocks/GalleryBlock.vue

@@ -0,0 +1,236 @@
+<script setup lang="ts">
+/**
+ * Gallery block — multi-image grid with upload and reorder.
+ * Each image has src, alt, caption.
+ */
+const props = defineProps<{
+  content: Record<string, unknown>;
+}>();
+
+const emit = defineEmits<{
+  update: [content: Record<string, unknown>];
+}>();
+
+interface GalleryImage {
+  src: string;
+  alt: string;
+  caption: string;
+}
+
+const images = computed<GalleryImage[]>(() => {
+  const raw = props.content.images;
+  if (!Array.isArray(raw)) return [];
+  return raw as GalleryImage[];
+});
+
+function updateImages(newImages: GalleryImage[]): void {
+  emit('update', { images: newImages });
+}
+
+const uploading = ref(false);
+
+async function handleFileSelect(event: Event): Promise<void> {
+  const input = event.target as HTMLInputElement;
+  if (!input.files?.length) return;
+
+  uploading.value = true;
+  const newImages = [...images.value];
+
+  for (const file of Array.from(input.files)) {
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+      formData.append('purpose', 'content');
+      const result = await $fetch<{ url: string }>('/api/files/upload', {
+        method: 'POST',
+        body: formData,
+      });
+      newImages.push({
+        src: result.url,
+        alt: file.name.replace(/\.[^.]+$/, ''),
+        caption: '',
+      });
+    } catch {
+      // Skip failed uploads
+    }
+  }
+
+  updateImages(newImages);
+  uploading.value = false;
+  input.value = '';
+}
+
+function removeImage(index: number): void {
+  const newImages = images.value.filter((_, i) => i !== index);
+  updateImages(newImages);
+}
+
+function updateImageField(index: number, field: keyof GalleryImage, value: string): void {
+  const newImages = images.value.map((img, i) =>
+    i === index ? { ...img, [field]: value } : img,
+  );
+  updateImages(newImages);
+}
+</script>
+
+<template>
+  <div class="cpub-gallery-block">
+    <!-- Image grid -->
+    <div v-if="images.length > 0" class="cpub-gallery-grid">
+      <div v-for="(img, idx) in images" :key="idx" class="cpub-gallery-item">
+        <div class="cpub-gallery-img-wrap">
+          <img :src="img.src" :alt="img.alt" class="cpub-gallery-img" />
+          <button class="cpub-gallery-remove" title="Remove" @click="removeImage(idx)">
+            <i class="fa-solid fa-xmark"></i>
+          </button>
+        </div>
+        <input
+          class="cpub-gallery-field"
+          type="text"
+          :value="img.alt"
+          placeholder="Alt text..."
+          @input="updateImageField(idx, 'alt', ($event.target as HTMLInputElement).value)"
+        />
+        <input
+          class="cpub-gallery-field"
+          type="text"
+          :value="img.caption"
+          placeholder="Caption..."
+          @input="updateImageField(idx, 'caption', ($event.target as HTMLInputElement).value)"
+        />
+      </div>
+    </div>
+
+    <!-- Add images -->
+    <label class="cpub-gallery-add" :class="{ 'cpub-gallery-uploading': uploading }">
+      <input type="file" accept="image/*" multiple class="cpub-sr-only" :disabled="uploading" @change="handleFileSelect" />
+      <template v-if="uploading">
+        <i class="fa-solid fa-circle-notch fa-spin"></i>
+        <span>Uploading...</span>
+      </template>
+      <template v-else>
+        <i class="fa-solid fa-images"></i>
+        <span>{{ images.length > 0 ? 'Add more images' : 'Upload images for gallery' }}</span>
+      </template>
+    </label>
+  </div>
+</template>
+
+<style scoped>
+.cpub-gallery-block {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.cpub-gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 8px;
+}
+
+.cpub-gallery-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.cpub-gallery-img-wrap {
+  position: relative;
+  aspect-ratio: 4/3;
+  overflow: hidden;
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface2);
+}
+
+.cpub-gallery-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.cpub-gallery-remove {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 22px;
+  height: 22px;
+  background: var(--text);
+  border: none;
+  color: var(--surface);
+  font-size: 10px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.12s;
+}
+
+.cpub-gallery-img-wrap:hover .cpub-gallery-remove {
+  opacity: 1;
+}
+
+.cpub-gallery-remove:hover {
+  background: var(--red);
+}
+
+.cpub-gallery-field {
+  width: 100%;
+  padding: 4px 6px;
+  font-size: 10px;
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border2);
+  color: var(--text-dim);
+  outline: none;
+  font-style: italic;
+}
+
+.cpub-gallery-field:focus {
+  border-color: var(--accent);
+  font-style: normal;
+}
+
+.cpub-gallery-field::placeholder {
+  color: var(--text-faint);
+}
+
+.cpub-gallery-add {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 24px;
+  border: 2px dashed var(--border2);
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--text-dim);
+  transition: all 0.12s;
+}
+
+.cpub-gallery-add:hover {
+  border-color: var(--accent);
+  background: var(--accent-bg);
+  color: var(--accent);
+}
+
+.cpub-gallery-add i {
+  font-size: 16px;
+}
+
+.cpub-gallery-uploading {
+  pointer-events: none;
+  opacity: 0.7;
+}
+
+.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/HeadingBlock.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+/**
+ * Heading block — editable heading with level selector.
+ */
+const props = defineProps<{
+  content: Record<string, unknown>;
+}>();
+
+const emit = defineEmits<{
+  update: [content: Record<string, unknown>];
+}>();
+
+const level = computed(() => (props.content.level as number) ?? 2);
+const text = computed(() => (props.content.text as string) ?? '');
+const headingEl = ref<HTMLElement | null>(null);
+
+function onTextInput(event: Event): void {
+  const el = event.target as HTMLElement;
+  emit('update', { text: el.textContent ?? '', level: level.value });
+}
+
+function cycleLevel(): void {
+  const next = level.value >= 4 ? 2 : level.value + 1;
+  emit('update', { text: text.value, level: next });
+}
+
+// Set initial text without v-text (which fights with contenteditable)
+onMounted(() => {
+  if (headingEl.value && text.value) {
+    headingEl.value.textContent = text.value;
+  }
+});
+</script>
+
+<template>
+  <div class="cpub-heading-block">
+    <button class="cpub-heading-level" title="Change heading level" aria-label="Change heading level" @click="cycleLevel">
+      H{{ level }}
+    </button>
+    <div
+      ref="headingEl"
+      class="cpub-heading-text"
+      :class="`cpub-heading-text--h${level}`"
+      contenteditable="true"
+      :data-placeholder="`Heading ${level}`"
+      @input="onTextInput"
+    />
+  </div>
+</template>
+
+<style scoped>
+.cpub-heading-block {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.cpub-heading-level {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--text-faint);
+  background: var(--surface2);
+  border: var(--border-width-default) solid var(--border2);
+  padding: 2px 6px;
+  cursor: pointer;
+  flex-shrink: 0;
+  margin-top: 4px;
+  transition: all 0.1s;
+}
+
+.cpub-heading-level:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+  background: var(--accent-bg);
+}
+
+.cpub-heading-text {
+  flex: 1;
+  font-weight: 700;
+  outline: none;
+  min-height: 1.2em;
+  line-height: 1.3;
+}
+
+.cpub-heading-text:empty::before {
+  content: attr(data-placeholder);
+  color: var(--text-faint);
+  pointer-events: none;
+}
+
+.cpub-heading-text--h1 { font-size: 28px; }
+.cpub-heading-text--h2 { font-size: 22px; }
+.cpub-heading-text--h3 { font-size: 18px; }
+.cpub-heading-text--h4 { font-size: 15px; }
+</style>