@commonpub/layer 0.1.0

package/components/editors/BlockPicker.vue

@@ -0,0 +1,285 @@
+<script setup lang="ts">
+/**
+ * Block type picker — appears when clicking an insert zone.
+ * Shows available block types grouped by category, with search.
+ */
+export interface BlockTypeDef {
+  type: string;
+  label: string;
+  icon: string;
+  description?: string;
+  attrs?: Record<string, unknown>;
+}
+
+export interface BlockTypeGroup {
+  name: string;
+  blocks: BlockTypeDef[];
+}
+
+const props = defineProps<{
+  groups: BlockTypeGroup[];
+  visible: boolean;
+}>();
+
+const emit = defineEmits<{
+  select: [type: string, attrs?: Record<string, unknown>];
+  close: [];
+}>();
+
+const search = ref('');
+const selectedIndex = ref(0);
+const pickerRef = ref<HTMLElement | null>(null);
+
+const flatBlocks = computed(() => {
+  return props.groups.flatMap((g) => g.blocks);
+});
+
+const filteredBlocks = computed(() => {
+  const q = search.value.toLowerCase();
+  if (!q) return flatBlocks.value;
+  return flatBlocks.value.filter(
+    (b) => b.label.toLowerCase().includes(q) || b.type.toLowerCase().includes(q),
+  );
+});
+
+watch(() => props.visible, (v) => {
+  if (v) {
+    search.value = '';
+    selectedIndex.value = 0;
+    nextTick(() => {
+      (pickerRef.value?.querySelector('.cpub-picker-search') as HTMLInputElement)?.focus();
+    });
+  }
+});
+
+watch(search, () => {
+  selectedIndex.value = 0;
+});
+
+function handleKeydown(event: KeyboardEvent): void {
+  if (event.key === 'Escape') {
+    event.preventDefault();
+    emit('close');
+    return;
+  }
+  if (event.key === 'ArrowDown') {
+    event.preventDefault();
+    selectedIndex.value = Math.min(selectedIndex.value + 1, filteredBlocks.value.length - 1);
+    return;
+  }
+  if (event.key === 'ArrowUp') {
+    event.preventDefault();
+    selectedIndex.value = Math.max(selectedIndex.value - 1, 0);
+    return;
+  }
+  if (event.key === 'Enter') {
+    event.preventDefault();
+    const block = filteredBlocks.value[selectedIndex.value];
+    if (block) {
+      emit('select', block.type, block.attrs);
+    }
+    return;
+  }
+}
+
+function selectBlock(block: BlockTypeDef): void {
+  emit('select', block.type, block.attrs);
+}
+
+// Close on click outside
+function handleClickOutside(event: MouseEvent): void {
+  if (pickerRef.value && !pickerRef.value.contains(event.target as Node)) {
+    emit('close');
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('mousedown', handleClickOutside);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('mousedown', handleClickOutside);
+});
+</script>
+
+<template>
+  <div v-if="visible" ref="pickerRef" class="cpub-picker" @keydown="handleKeydown">
+    <div class="cpub-picker-header">
+      <i class="fa-solid fa-magnifying-glass cpub-picker-search-icon"></i>
+      <input
+        v-model="search"
+        type="text"
+        class="cpub-picker-search"
+        placeholder="Search blocks..."
+        aria-label="Search block types"
+      />
+    </div>
+    <div class="cpub-picker-body">
+      <template v-if="filteredBlocks.length > 0">
+        <button
+          v-for="(block, i) in filteredBlocks"
+          :key="block.type + (block.attrs?.variant ?? '')"
+          :data-block="block.type"
+          class="cpub-picker-item"
+          :class="{ 'cpub-picker-item--active': i === selectedIndex }"
+          @mouseenter="selectedIndex = i"
+          @click="selectBlock(block)"
+        >
+          <span class="cpub-picker-icon"><i :class="['fa-solid', block.icon]"></i></span>
+          <span class="cpub-picker-text">
+            <span class="cpub-picker-label">{{ block.label }}</span>
+            <span v-if="block.description" class="cpub-picker-desc">{{ block.description }}</span>
+          </span>
+        </button>
+      </template>
+      <div v-else class="cpub-picker-empty">
+        No blocks match "{{ search }}"
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-picker {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 100;
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  box-shadow: var(--shadow-lg);
+  min-width: 260px;
+  max-width: 340px;
+  max-height: 360px;
+  display: flex;
+  flex-direction: column;
+}
+
+.cpub-picker-header {
+  display: flex;
+  align-items: center;
+  padding: 8px 10px;
+  gap: 8px;
+  border-bottom: var(--border-width-default) solid var(--border);
+  flex-shrink: 0;
+}
+
+.cpub-picker-search-icon {
+  font-size: 10px;
+  color: var(--text-faint);
+  flex-shrink: 0;
+}
+
+.cpub-picker-search {
+  background: transparent;
+  border: none;
+  outline: none;
+  font-size: 12px;
+  color: var(--text);
+  width: 100%;
+  font-family: var(--font-sans);
+}
+
+.cpub-picker-search::placeholder {
+  color: var(--text-faint);
+}
+
+.cpub-picker-body {
+  overflow-y: auto;
+  flex: 1;
+  padding: 4px;
+}
+
+.cpub-picker-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 7px 10px;
+  background: transparent;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.08s;
+  color: var(--text);
+  font-size: 12px;
+}
+
+.cpub-picker-item:hover,
+.cpub-picker-item--active {
+  background: var(--accent-bg);
+}
+
+.cpub-picker-icon {
+  width: 26px;
+  height: 26px;
+  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-dim);
+  flex-shrink: 0;
+}
+
+.cpub-picker-item--active .cpub-picker-icon,
+.cpub-picker-item:hover .cpub-picker-icon {
+  background: var(--accent-bg);
+  border-color: var(--accent-border);
+  color: var(--accent);
+}
+
+.cpub-picker-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.cpub-picker-label {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.cpub-picker-desc {
+  font-size: 10px;
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+}
+
+.cpub-picker-empty {
+  padding: 16px;
+  text-align: center;
+  font-size: 11px;
+  color: var(--text-faint);
+}
+
+/* Per-block-type icon colors */
+[data-block="heading"] .cpub-picker-icon { color: var(--teal); background: color-mix(in srgb, var(--teal) 10%, transparent); }
+[data-block="text"] .cpub-picker-icon,
+[data-block="paragraph"] .cpub-picker-icon { color: var(--text-dim); background: var(--surface2); }
+[data-block="image"] .cpub-picker-icon { color: #38bdf8; background: rgba(56, 189, 248, 0.08); }
+[data-block="code"] .cpub-picker-icon,
+[data-block="code_block"] .cpub-picker-icon { color: #c084fc; background: rgba(192, 132, 252, 0.08); }
+[data-block="callout"] .cpub-picker-icon { color: #fbbf24; background: rgba(251, 191, 36, 0.08); }
+[data-block="quote"] .cpub-picker-icon,
+[data-block="blockquote"] .cpub-picker-icon { color: #94a3b8; background: rgba(148, 163, 184, 0.08); }
+[data-block="embed"] .cpub-picker-icon { color: #f472b6; background: rgba(244, 114, 182, 0.08); }
+[data-block="video"] .cpub-picker-icon { color: #fb923c; background: rgba(251, 146, 60, 0.08); }
+[data-block="divider"] .cpub-picker-icon,
+[data-block="horizontal_rule"] .cpub-picker-icon,
+[data-block="horizontalRule"] .cpub-picker-icon { color: var(--text-faint); background: var(--surface2); }
+[data-block="gallery"] .cpub-picker-icon { color: #2dd4bf; background: rgba(45, 212, 191, 0.08); }
+[data-block="quiz"] .cpub-picker-icon { color: #4ade80; background: rgba(74, 222, 128, 0.08); }
+[data-block="slider"] .cpub-picker-icon,
+[data-block="interactiveSlider"] .cpub-picker-icon { color: #818cf8; background: rgba(129, 140, 248, 0.08); }
+[data-block="math"] .cpub-picker-icon,
+[data-block="mathNotation"] .cpub-picker-icon { color: #e879f9; background: rgba(232, 121, 249, 0.08); }
+[data-block="markdown"] .cpub-picker-icon { color: var(--text-dim); background: var(--surface2); }
+[data-block="buildStep"] .cpub-picker-icon { color: var(--accent); background: var(--accent-bg); }
+[data-block="partsList"] .cpub-picker-icon { color: #fb7185; background: rgba(251, 113, 133, 0.08); }
+[data-block="toolList"] .cpub-picker-icon { color: #a78bfa; background: rgba(167, 139, 250, 0.08); }
+[data-block="downloads"] .cpub-picker-icon { color: #22d3ee; background: rgba(34, 211, 238, 0.08); }
+[data-block="sectionHeader"] .cpub-picker-icon { color: var(--accent); background: var(--accent-bg); }
+[data-block="checkpoint"] .cpub-picker-icon { color: #34d399; background: rgba(52, 211, 153, 0.08); }
+</style>

package/components/editors/BlockWrapper.vue

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+/**
+ * Block wrapper — wraps every content block with:
+ * - Drag handle (left, appears on hover)
+ * - Block controls (top-right: move, clone, delete)
+ * - Selected state (accent outline)
+ * - Click-to-select
+ */
+import type { EditorBlock } from '../../composables/useBlockEditor';
+
+const props = defineProps<{
+  block: EditorBlock;
+  selected: boolean;
+}>();
+
+const emit = defineEmits<{
+  select: [];
+  delete: [];
+  duplicate: [];
+  'move-up': [];
+  'move-down': [];
+  'drag-start': [event: DragEvent];
+  'drag-end': [event: DragEvent];
+}>();
+
+function onDragStart(event: DragEvent): void {
+  event.dataTransfer?.setData('text/plain', props.block.id);
+  event.dataTransfer!.effectAllowed = 'move';
+  emit('drag-start', event);
+}
+
+function onDragEnd(event: DragEvent): void {
+  emit('drag-end', event);
+}
+</script>
+
+<template>
+  <div
+    class="cpub-block-wrap"
+    :class="{ 'cpub-block-wrap--selected': selected }"
+    @click.stop="emit('select')"
+  >
+    <!-- Drag handle (left side) -->
+    <div class="cpub-block-handle">
+      <button
+        class="cpub-handle-btn"
+        title="Drag to reorder"
+        draggable="true"
+        @dragstart="onDragStart"
+        @dragend="onDragEnd"
+      >
+        <i class="fa-solid fa-grip-vertical"></i>
+      </button>
+    </div>
+
+    <!-- Block controls (top-right, shown on hover) -->
+    <div class="cpub-block-controls">
+      <button class="cpub-block-ctrl" title="Move up" @click.stop="emit('move-up')">
+        <i class="fa-solid fa-arrow-up"></i>
+      </button>
+      <button class="cpub-block-ctrl" title="Move down" @click.stop="emit('move-down')">
+        <i class="fa-solid fa-arrow-down"></i>
+      </button>
+      <button class="cpub-block-ctrl" title="Duplicate" @click.stop="emit('duplicate')">
+        <i class="fa-solid fa-copy"></i>
+      </button>
+      <button class="cpub-block-ctrl cpub-block-ctrl--danger" title="Delete" @click.stop="emit('delete')">
+        <i class="fa-solid fa-trash"></i>
+      </button>
+    </div>
+
+    <!-- Block content -->
+    <div class="cpub-block-inner">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-block-wrap {
+  position: relative;
+  border: var(--border-width-default) solid transparent;
+  transition: border-color 0.12s;
+}
+
+.cpub-block-wrap:hover {
+  border-color: var(--border2);
+}
+
+.cpub-block-wrap--selected {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent-bg);
+}
+
+/* Drag handle — left side */
+.cpub-block-handle {
+  position: absolute;
+  left: -36px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  opacity: 0;
+  transition: opacity 0.12s;
+}
+
+.cpub-block-wrap:hover .cpub-block-handle,
+.cpub-block-wrap--selected .cpub-block-handle {
+  opacity: 1;
+}
+
+.cpub-handle-btn {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border2);
+  color: var(--text-faint);
+  cursor: grab;
+  font-size: 11px;
+  padding: 0;
+}
+
+.cpub-handle-btn:hover {
+  border-color: var(--border);
+  color: var(--text-dim);
+  background: var(--surface2);
+}
+
+.cpub-handle-btn:active {
+  cursor: grabbing;
+}
+
+/* Block controls — top-right, offset above the block */
+.cpub-block-controls {
+  --ctrl-surface: rgba(255, 255, 255, 0.15);
+  position: absolute;
+  top: -30px;
+  right: 0;
+  display: flex;
+  gap: 0;
+  background: var(--text);
+  padding: 2px;
+  opacity: 0;
+  transition: opacity 0.12s;
+  z-index: 10;
+}
+
+.cpub-block-wrap:hover .cpub-block-controls,
+.cpub-block-wrap--selected .cpub-block-controls {
+  opacity: 1;
+}
+
+.cpub-block-ctrl {
+  width: 26px;
+  height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  color: var(--surface3);
+  cursor: pointer;
+  font-size: 10px;
+  padding: 0;
+  transition: background 0.1s, color 0.1s;
+}
+
+.cpub-block-ctrl:hover {
+  background: var(--ctrl-surface);
+  color: var(--surface);
+}
+
+.cpub-block-ctrl--danger:hover {
+  background: var(--red);
+  color: var(--surface);
+}
+
+/* Block inner */
+.cpub-block-inner {
+  min-height: 20px;
+}
+
+/* Touch devices: always show controls since there's no hover */
+@media (hover: none) {
+  .cpub-block-handle { opacity: 1; }
+  .cpub-block-controls { opacity: 1; }
+}
+</style>