@commonpub/editor 0.5.0 → 0.6.1

package/vue/components/blocks/MarkdownBlock.vue

@@ -0,0 +1,259 @@
+<script setup lang="ts">
+import { ref, computed, watch, onUnmounted } from 'vue';
+import { markdownToBlockTuples } from '@commonpub/editor';
+import type { BlockTuple } from '@commonpub/editor';
+
+const props = defineProps<{
+  content: Record<string, unknown>;
+}>();
+
+const emit = defineEmits<{
+  update: [content: Record<string, unknown>];
+}>();
+
+/** 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 as string) || '');
+
+watch(() => props.content.source as string, (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/vue/components/blocks/MathBlock.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+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>

package/vue/components/blocks/PartsListBlock.vue

@@ -0,0 +1,354 @@
+<script setup lang="ts">
+/**
+ * Parts list block — editable BOM table with product catalog autocomplete.
+ * Product search is abstracted via the onSearchProducts callback prop.
+ */
+import { ref, computed } from 'vue';
+
+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>;
+  onSearchProducts?: (query: string) => Promise<ProductResult[]>;
+}>();
+
+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 });
+  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);
+
+  if (parts.value[index]?.productId) {
+    clearProductLink(index);
+  }
+
+  if (debounceTimer.value) clearTimeout(debounceTimer.value);
+
+  if (value.length < 2 || !props.onSearchProducts) {
+    autocompleteResults.value = [];
+    activeAutocomplete.value = -1;
+    return;
+  }
+
+  activeAutocomplete.value = index;
+  debounceTimer.value = setTimeout(async () => {
+    autocompleteLoading.value = true;
+    try {
+      autocompleteResults.value = await props.onSearchProducts!(value);
+    } catch {
+      autocompleteResults.value = [];
+    } finally {
+      autocompleteLoading.value = false;
+    }
+  }, 250);
+}
+
+function onNameBlur(): void {
+  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="onSearchProducts ? 'Search product catalog...' : 'Part name...'"
+                :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>