@commonpub/layer 0.7.2 → 0.7.4

package/components/editors/BlockPicker.vue

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

@@ -1,192 +0,0 @@
-<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: only show controls on selected block since there's no hover */
-@media (hover: none) {
-  .cpub-block-wrap--selected .cpub-block-handle { opacity: 1; }
-  .cpub-block-wrap--selected .cpub-block-controls { opacity: 1; }
-}
-</style>