@commonpub/layer 0.1.0

package/components/editors/blocks/PartsListBlock.vue

@@ -0,0 +1,358 @@
+<script setup lang="ts">
+/**
+ * Parts list block — editable BOM table with product catalog autocomplete.
+ * When a user selects a product from the catalog, the productId is stored
+ * so the content-products join table can be synced on save (BOM → product hub gallery).
+ */
+interface Part {
+  name: string;
+  qty: number;
+  price?: number;
+  url?: string;
+  category?: string;
+  required?: boolean;
+  notes?: string;
+  productId?: string;
+  productSlug?: string;
+}
+
+interface ProductResult {
+  id: string;
+  name: string;
+  slug: string;
+  description: string | null;
+  category: string | null;
+  imageUrl: string | null;
+  purchaseUrl: string | null;
+}
+
+const props = defineProps<{
+  content: Record<string, unknown>;
+}>();
+
+const emit = defineEmits<{
+  update: [content: Record<string, unknown>];
+}>();
+
+const parts = computed(() => (props.content.parts as Part[]) ?? []);
+
+function updatePart(index: number, field: string, value: unknown): void {
+  const updated = [...parts.value];
+  updated[index] = { ...updated[index]!, [field]: value };
+  emit('update', { parts: updated });
+}
+
+function addPart(): void {
+  emit('update', { parts: [...parts.value, { name: '', qty: 1, required: true }] });
+}
+
+function removePart(index: number): void {
+  const updated = parts.value.filter((_: Part, i: number) => i !== index);
+  emit('update', { parts: updated });
+}
+
+function selectProduct(index: number, product: ProductResult): void {
+  const updated = [...parts.value];
+  updated[index] = {
+    ...updated[index]!,
+    name: product.name,
+    url: product.purchaseUrl ?? undefined,
+    productId: product.id,
+    productSlug: product.slug,
+    category: product.category ?? undefined,
+  };
+  emit('update', { parts: updated });
+  // Close autocomplete
+  activeAutocomplete.value = -1;
+  autocompleteResults.value = [];
+}
+
+function clearProductLink(index: number): void {
+  const updated = [...parts.value];
+  updated[index] = { ...updated[index]!, productId: undefined, productSlug: undefined };
+  emit('update', { parts: updated });
+}
+
+const totalPrice = computed(() => {
+  return parts.value.reduce((sum: number, p: Part) => sum + (p.price ?? 0) * p.qty, 0);
+});
+
+// --- Autocomplete ---
+const activeAutocomplete = ref(-1);
+const autocompleteResults = ref<ProductResult[]>([]);
+const autocompleteLoading = ref(false);
+const debounceTimer = ref<ReturnType<typeof setTimeout> | null>(null);
+
+function onNameInput(index: number, value: string): void {
+  updatePart(index, 'name', value);
+
+  // Clear product link when name changes manually
+  if (parts.value[index]?.productId) {
+    clearProductLink(index);
+  }
+
+  if (debounceTimer.value) clearTimeout(debounceTimer.value);
+
+  if (value.length < 2) {
+    autocompleteResults.value = [];
+    activeAutocomplete.value = -1;
+    return;
+  }
+
+  activeAutocomplete.value = index;
+  debounceTimer.value = setTimeout(async () => {
+    autocompleteLoading.value = true;
+    try {
+      const data = await $fetch<{ items: ProductResult[] }>('/api/products', {
+        query: { q: value, limit: 5 },
+      });
+      autocompleteResults.value = data.items;
+    } catch {
+      autocompleteResults.value = [];
+    } finally {
+      autocompleteLoading.value = false;
+    }
+  }, 250);
+}
+
+function onNameBlur(): void {
+  // Delay to allow click on autocomplete item
+  setTimeout(() => {
+    activeAutocomplete.value = -1;
+    autocompleteResults.value = [];
+  }, 200);
+}
+</script>
+
+<template>
+  <div class="cpub-parts-block">
+    <div class="cpub-parts-header">
+      <div class="cpub-parts-icon"><i class="fa-solid fa-list-check"></i></div>
+      <span class="cpub-parts-title">Parts List</span>
+      <span class="cpub-parts-count">{{ parts.length }} items<template v-if="totalPrice > 0"> · ${{ totalPrice.toFixed(2) }} est.</template></span>
+      <button class="cpub-parts-add-btn" @click="addPart">
+        <i class="fa-solid fa-plus"></i> Add part
+      </button>
+    </div>
+    <table v-if="parts.length > 0" class="cpub-parts-table">
+      <thead>
+        <tr>
+          <th>Part</th>
+          <th class="cpub-parts-qty">Qty</th>
+          <th>Notes</th>
+          <th class="cpub-parts-price">Price</th>
+          <th class="cpub-parts-actions"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(part, i) in parts" :key="i">
+          <td class="cpub-parts-name-cell">
+            <div class="cpub-parts-name-wrap">
+              <input
+                class="cpub-parts-input"
+                type="text"
+                :value="part.name"
+                placeholder="Search product catalog..."
+                :aria-label="`Part ${i + 1} name`"
+                @input="onNameInput(i, ($event.target as HTMLInputElement).value)"
+                @blur="onNameBlur"
+              />
+              <span v-if="part.productId" class="cpub-parts-linked" title="Linked to product catalog">
+                <i class="fa-solid fa-link"></i>
+              </span>
+            </div>
+            <!-- Autocomplete dropdown -->
+            <div v-if="activeAutocomplete === i && autocompleteResults.length > 0" class="cpub-parts-ac">
+              <button
+                v-for="product in autocompleteResults"
+                :key="product.id"
+                class="cpub-parts-ac-item"
+                @mousedown.prevent="selectProduct(i, product)"
+              >
+                <div class="cpub-parts-ac-icon">
+                  <img v-if="product.imageUrl" :src="product.imageUrl" :alt="product.name" />
+                  <i v-else class="fa-solid fa-microchip"></i>
+                </div>
+                <div class="cpub-parts-ac-info">
+                  <span class="cpub-parts-ac-name">{{ product.name }}</span>
+                  <span v-if="product.category" class="cpub-parts-ac-cat">{{ product.category }}</span>
+                </div>
+              </button>
+            </div>
+            <div v-else-if="activeAutocomplete === i && autocompleteLoading" class="cpub-parts-ac">
+              <div class="cpub-parts-ac-loading">Searching...</div>
+            </div>
+          </td>
+          <td class="cpub-parts-qty">
+            <input class="cpub-parts-input cpub-parts-input-sm" type="number" :value="part.qty" min="1" :aria-label="`Part ${i + 1} quantity`" @input="updatePart(i, 'qty', Number(($event.target as HTMLInputElement).value))" />
+          </td>
+          <td>
+            <input class="cpub-parts-input" type="text" :value="part.notes ?? ''" placeholder="Notes..." :aria-label="`Part ${i + 1} notes`" @input="updatePart(i, 'notes', ($event.target as HTMLInputElement).value)" />
+          </td>
+          <td class="cpub-parts-price">
+            <input class="cpub-parts-input cpub-parts-input-sm" type="number" step="0.01" :value="part.price ?? ''" placeholder="0.00" :aria-label="`Part ${i + 1} price`" @input="updatePart(i, 'price', Number(($event.target as HTMLInputElement).value))" />
+          </td>
+          <td class="cpub-parts-actions">
+            <button class="cpub-parts-remove" title="Remove" @click="removePart(i)">
+              <i class="fa-solid fa-xmark"></i>
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <div v-else class="cpub-parts-empty" @click="addPart">
+      <i class="fa-solid fa-plus"></i> Click to add your first part
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-parts-block { border: var(--border-width-default) solid var(--border2); background: var(--surface); }
+
+.cpub-parts-header {
+  display: flex; align-items: center; gap: 8px;
+  padding: 10px 14px;
+  border-bottom: var(--border-width-default) solid var(--border2);
+  background: var(--surface2);
+}
+
+.cpub-parts-icon { font-size: 12px; color: var(--accent); }
+.cpub-parts-title { font-size: 12px; font-weight: 600; }
+.cpub-parts-count { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); margin-left: auto; }
+
+.cpub-parts-add-btn {
+  font-family: var(--font-mono); font-size: 10px;
+  padding: 3px 8px; background: transparent;
+  border: var(--border-width-default) solid var(--border2); color: var(--text-dim);
+  cursor: pointer; display: flex; align-items: center; gap: 4px;
+  margin-left: 8px;
+}
+.cpub-parts-add-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
+
+.cpub-parts-table { width: 100%; border-collapse: collapse; }
+.cpub-parts-table th {
+  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.1em;
+  text-align: left; padding: 6px 10px;
+  background: var(--text); color: var(--surface);
+}
+.cpub-parts-table td { padding: 4px 6px; border-bottom: var(--border-width-default) solid var(--border2); }
+.cpub-parts-qty { width: 50px; text-align: center; }
+.cpub-parts-price { width: 80px; }
+.cpub-parts-actions { width: 30px; text-align: center; }
+
+.cpub-parts-name-cell {
+  position: relative;
+}
+
+.cpub-parts-name-wrap {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.cpub-parts-linked {
+  font-size: 9px;
+  color: var(--accent);
+  flex-shrink: 0;
+}
+
+.cpub-parts-input {
+  width: 100%; padding: 4px 6px; font-size: 12px;
+  background: transparent; border: var(--border-width-default) solid transparent;
+  color: var(--text); outline: none;
+}
+.cpub-parts-input:focus { border-color: var(--accent); background: var(--accent-bg); }
+.cpub-parts-input::placeholder { color: var(--text-faint); }
+.cpub-parts-input-sm { width: 60px; text-align: center; }
+
+.cpub-parts-remove {
+  background: none; border: none; color: var(--text-faint);
+  cursor: pointer; font-size: 10px; padding: 4px;
+}
+.cpub-parts-remove:hover { color: var(--red); }
+
+.cpub-parts-empty {
+  padding: 24px; text-align: center;
+  font-size: 12px; color: var(--text-faint);
+  cursor: pointer;
+}
+.cpub-parts-empty:hover { color: var(--accent); background: var(--accent-bg); }
+
+/* Autocomplete dropdown */
+.cpub-parts-ac {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 50;
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  box-shadow: var(--shadow-md);
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.cpub-parts-ac-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 10px;
+  border: none;
+  background: transparent;
+  color: var(--text);
+  cursor: pointer;
+  text-align: left;
+  font-size: 12px;
+}
+
+.cpub-parts-ac-item:hover {
+  background: var(--accent-bg);
+}
+
+.cpub-parts-ac-icon {
+  width: 24px;
+  height: 24px;
+  background: var(--surface2);
+  border: var(--border-width-default) solid var(--border2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  color: var(--text-faint);
+  flex-shrink: 0;
+}
+
+.cpub-parts-ac-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.cpub-parts-ac-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.cpub-parts-ac-name {
+  font-weight: 500;
+}
+
+.cpub-parts-ac-cat {
+  font-size: 9px;
+  font-family: var(--font-mono);
+  color: var(--text-faint);
+  text-transform: uppercase;
+}
+
+.cpub-parts-ac-loading {
+  padding: 10px;
+  text-align: center;
+  font-size: 11px;
+  color: var(--text-faint);
+}
+</style>

package/components/editors/blocks/QuizBlock.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+const props = defineProps<{ content: Record<string, unknown> }>();
+const emit = defineEmits<{ update: [content: Record<string, unknown>] }>();
+interface Option { text: string; correct: boolean; }
+const question = computed(() => (props.content.question as string) ?? '');
+const options = computed(() => (props.content.options as Option[]) ?? []);
+function updateQuestion(value: string): void { emit('update', { ...props.content, question: value }); }
+function addOption(): void { emit('update', { ...props.content, options: [...options.value, { text: '', correct: false }] }); }
+function updateOption(i: number, field: string, value: unknown): void {
+  const updated = [...options.value];
+  updated[i] = { ...updated[i]!, [field]: value };
+  emit('update', { ...props.content, options: updated });
+}
+function removeOption(i: number): void {
+  emit('update', { ...props.content, options: options.value.filter((_: Option, idx: number) => idx !== i) });
+}
+</script>
+<template>
+  <div class="cpub-quiz-block">
+    <div class="cpub-quiz-header"><i class="fa-solid fa-circle-question"></i> Quiz</div>
+    <div class="cpub-quiz-body">
+      <input class="cpub-quiz-question" type="text" :value="question" placeholder="Ask a question..." @input="updateQuestion(($event.target as HTMLInputElement).value)" />
+      <div v-for="(opt, i) in options" :key="i" class="cpub-quiz-option">
+        <input type="checkbox" :checked="opt.correct" @change="updateOption(i, 'correct', ($event.target as HTMLInputElement).checked)" />
+        <input class="cpub-quiz-opt-text" type="text" :value="opt.text" placeholder="Option text..." @input="updateOption(i, 'text', ($event.target as HTMLInputElement).value)" />
+        <button class="cpub-quiz-opt-remove" @click="removeOption(i)"><i class="fa-solid fa-xmark"></i></button>
+      </div>
+      <button class="cpub-quiz-add-opt" @click="addOption"><i class="fa-solid fa-plus"></i> Add option</button>
+    </div>
+  </div>
+</template>
+<style scoped>
+.cpub-quiz-block { border: var(--border-width-default) solid var(--border2); background: var(--surface); }
+.cpub-quiz-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-quiz-header i { color: var(--purple); }
+.cpub-quiz-body { padding: 12px; }
+.cpub-quiz-question { width: 100%; font-size: 14px; font-weight: 600; background: transparent; border: none; border-bottom: var(--border-width-default) solid var(--border2); padding: 6px 0; outline: none; color: var(--text); margin-bottom: 12px; }
+.cpub-quiz-question::placeholder { color: var(--text-faint); }
+.cpub-quiz-option { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
+.cpub-quiz-option input[type="checkbox"] { accent-color: var(--green); }
+.cpub-quiz-opt-text { flex: 1; font-size: 12px; background: transparent; border: none; outline: none; color: var(--text); padding: 4px; }
+.cpub-quiz-opt-text::placeholder { color: var(--text-faint); }
+.cpub-quiz-opt-remove { background: none; border: none; color: var(--text-faint); cursor: pointer; }
+.cpub-quiz-opt-remove:hover { color: var(--red); }
+.cpub-quiz-add-opt { margin-top: 8px; font-size: 11px; color: var(--text-dim); background: none; border: 2px dashed var(--border2); padding: 6px 12px; cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; }
+.cpub-quiz-add-opt:hover { border-color: var(--accent); color: var(--accent); }
+</style>

package/components/editors/blocks/QuoteBlock.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+/**
+ * Blockquote block — styled quote with editable body and attribution.
+ */
+import { sanitizeBlockHtml } from '../../../composables/useSanitize';
+
+const props = defineProps<{
+  content: Record<string, unknown>;
+}>();
+
+const emit = defineEmits<{
+  update: [content: Record<string, unknown>];
+}>();
+
+const html = computed(() => (props.content.html as string) ?? '');
+const attribution = computed(() => (props.content.attribution as string) ?? '');
+
+function onBodyInput(event: Event): void {
+  const el = event.target as HTMLElement;
+  emit('update', { html: sanitizeBlockHtml(el.innerHTML), attribution: attribution.value });
+}
+
+function onAttributionInput(event: Event): void {
+  emit('update', { html: html.value, attribution: (event.target as HTMLInputElement).value });
+}
+</script>
+
+<template>
+  <div class="cpub-quote-block">
+    <div class="cpub-quote-bar" aria-hidden="true" />
+    <div class="cpub-quote-body">
+      <div
+        class="cpub-quote-text"
+        contenteditable="true"
+        data-placeholder="Enter quote..."
+        @input="onBodyInput"
+        v-html="html"
+      />
+      <input
+        class="cpub-quote-attribution"
+        type="text"
+        :value="attribution"
+        placeholder="— Source or author"
+        aria-label="Quote attribution"
+        @input="onAttributionInput"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-quote-block {
+  display: flex;
+  gap: 0;
+  background: var(--surface2);
+  border: var(--border-width-default) solid var(--border2);
+}
+
+.cpub-quote-bar {
+  width: 5px;
+  background: var(--accent);
+  flex-shrink: 0;
+}
+
+.cpub-quote-body {
+  flex: 1;
+  padding: 16px 20px;
+}
+
+.cpub-quote-text {
+  font-size: 16px;
+  font-style: italic;
+  line-height: 1.7;
+  color: var(--text);
+  outline: none;
+  min-height: 1.7em;
+}
+
+.cpub-quote-text:empty::before {
+  content: attr(data-placeholder);
+  color: var(--text-faint);
+  pointer-events: none;
+}
+
+.cpub-quote-attribution {
+  display: block;
+  width: 100%;
+  margin-top: 10px;
+  padding: 0;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-dim);
+  background: transparent;
+  border: none;
+  outline: none;
+}
+
+.cpub-quote-attribution::placeholder {
+  color: var(--text-faint);
+}
+</style>

package/components/editors/blocks/SectionHeaderBlock.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+const props = defineProps<{
+  content: Record<string, unknown>;
+}>();
+
+const emit = defineEmits<{
+  update: [content: Record<string, unknown>];
+}>();
+
+const tag = computed({
+  get: () => (props.content.tag as string) || '',
+  set: (v: string) => emit('update', { ...props.content, tag: v }),
+});
+
+const title = computed({
+  get: () => (props.content.title as string) || '',
+  set: (v: string) => emit('update', { ...props.content, title: v }),
+});
+
+const body = computed({
+  get: () => (props.content.body as string) || '',
+  set: (v: string) => emit('update', { ...props.content, body: v }),
+});
+</script>
+
+<template>
+  <div class="cpub-section-header-block">
+    <input
+      v-model="tag"
+      type="text"
+      class="cpub-shb-tag"
+      placeholder="§ 01 — Section Name"
+      aria-label="Section tag"
+    />
+    <input
+      v-model="title"
+      type="text"
+      class="cpub-shb-title"
+      placeholder="Section title"
+      aria-label="Section title"
+    />
+    <textarea
+      v-model="body"
+      class="cpub-shb-body"
+      placeholder="Brief intro for this section..."
+      rows="2"
+      aria-label="Section intro"
+    />
+  </div>
+</template>
+
+<style scoped>
+.cpub-section-header-block {
+  padding: 28px 24px 24px;
+}
+
+.cpub-shb-tag {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin-bottom: 10px;
+  display: block;
+  width: 100%;
+  background: none;
+  border: var(--border-width-default) solid transparent;
+  padding: 2px 4px;
+  outline: none;
+}
+
+.cpub-shb-tag::placeholder {
+  color: var(--text-faint);
+  font-weight: 500;
+}
+
+.cpub-shb-tag:focus {
+  border-color: var(--accent-border);
+  background: var(--accent-bg);
+}
+
+.cpub-shb-title {
+  font-size: 26px;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  color: var(--text);
+  line-height: 1.15;
+  margin-bottom: 10px;
+  display: block;
+  width: 100%;
+  background: none;
+  border: var(--border-width-default) solid transparent;
+  padding: 4px;
+  outline: none;
+  font-family: inherit;
+}
+
+.cpub-shb-title::placeholder {
+  color: var(--text-faint);
+}
+
+.cpub-shb-title:focus {
+  border-color: var(--accent-border);
+  background: var(--surface2);
+}
+
+.cpub-shb-body {
+  font-size: 14px;
+  color: var(--text-dim);
+  line-height: 1.75;
+  max-width: 540px;
+  width: 100%;
+  resize: vertical;
+  background: none;
+  border: var(--border-width-default) solid transparent;
+  padding: 4px;
+  outline: none;
+  font-family: inherit;
+}
+
+.cpub-shb-body::placeholder {
+  color: var(--text-faint);
+}
+
+.cpub-shb-body:focus {
+  border-color: var(--accent-border);
+  background: var(--surface2);
+}
+</style>