@commonpub/layer 0.7.2 → 0.7.3

package/components/editors/blocks/MarkdownBlock.vue

@@ -1,258 +0,0 @@
-<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

@@ -1,37 +0,0 @@
-<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>

package/components/editors/blocks/PartsListBlock.vue

@@ -1,358 +0,0 @@
-<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

@@ -1,47 +0,0 @@
-<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>