@commonpub/layer 0.7.2 → 0.7.4

package/components/editors/blocks/GalleryBlock.vue

@@ -1,236 +0,0 @@
-<script setup lang="ts">
-/**
- * Gallery block — multi-image grid with upload and reorder.
- * Each image has src, alt, caption.
- */
-const props = defineProps<{
-  content: Record<string, unknown>;
-}>();
-
-const emit = defineEmits<{
-  update: [content: Record<string, unknown>];
-}>();
-
-interface GalleryImage {
-  src: string;
-  alt: string;
-  caption: string;
-}
-
-const images = computed<GalleryImage[]>(() => {
-  const raw = props.content.images;
-  if (!Array.isArray(raw)) return [];
-  return raw as GalleryImage[];
-});
-
-function updateImages(newImages: GalleryImage[]): void {
-  emit('update', { images: newImages });
-}
-
-const uploading = ref(false);
-
-async function handleFileSelect(event: Event): Promise<void> {
-  const input = event.target as HTMLInputElement;
-  if (!input.files?.length) return;
-
-  uploading.value = true;
-  const newImages = [...images.value];
-
-  for (const file of Array.from(input.files)) {
-    try {
-      const formData = new FormData();
-      formData.append('file', file);
-      formData.append('purpose', 'content');
-      const result = await $fetch<{ url: string }>('/api/files/upload', {
-        method: 'POST',
-        body: formData,
-      });
-      newImages.push({
-        src: result.url,
-        alt: file.name.replace(/\.[^.]+$/, ''),
-        caption: '',
-      });
-    } catch {
-      // Skip failed uploads
-    }
-  }
-
-  updateImages(newImages);
-  uploading.value = false;
-  input.value = '';
-}
-
-function removeImage(index: number): void {
-  const newImages = images.value.filter((_, i) => i !== index);
-  updateImages(newImages);
-}
-
-function updateImageField(index: number, field: keyof GalleryImage, value: string): void {
-  const newImages = images.value.map((img, i) =>
-    i === index ? { ...img, [field]: value } : img,
-  );
-  updateImages(newImages);
-}
-</script>
-
-<template>
-  <div class="cpub-gallery-block">
-    <!-- Image grid -->
-    <div v-if="images.length > 0" class="cpub-gallery-grid">
-      <div v-for="(img, idx) in images" :key="idx" class="cpub-gallery-item">
-        <div class="cpub-gallery-img-wrap">
-          <img :src="img.src" :alt="img.alt" class="cpub-gallery-img" />
-          <button class="cpub-gallery-remove" title="Remove" @click="removeImage(idx)">
-            <i class="fa-solid fa-xmark"></i>
-          </button>
-        </div>
-        <input
-          class="cpub-gallery-field"
-          type="text"
-          :value="img.alt"
-          placeholder="Alt text..."
-          @input="updateImageField(idx, 'alt', ($event.target as HTMLInputElement).value)"
-        />
-        <input
-          class="cpub-gallery-field"
-          type="text"
-          :value="img.caption"
-          placeholder="Caption..."
-          @input="updateImageField(idx, 'caption', ($event.target as HTMLInputElement).value)"
-        />
-      </div>
-    </div>
-
-    <!-- Add images -->
-    <label class="cpub-gallery-add" :class="{ 'cpub-gallery-uploading': uploading }">
-      <input type="file" accept="image/*" multiple class="cpub-sr-only" :disabled="uploading" @change="handleFileSelect" />
-      <template v-if="uploading">
-        <i class="fa-solid fa-circle-notch fa-spin"></i>
-        <span>Uploading...</span>
-      </template>
-      <template v-else>
-        <i class="fa-solid fa-images"></i>
-        <span>{{ images.length > 0 ? 'Add more images' : 'Upload images for gallery' }}</span>
-      </template>
-    </label>
-  </div>
-</template>
-
-<style scoped>
-.cpub-gallery-block {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.cpub-gallery-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: 8px;
-}
-
-.cpub-gallery-item {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.cpub-gallery-img-wrap {
-  position: relative;
-  aspect-ratio: 4/3;
-  overflow: hidden;
-  border: var(--border-width-default) solid var(--border);
-  background: var(--surface2);
-}
-
-.cpub-gallery-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.cpub-gallery-remove {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  width: 22px;
-  height: 22px;
-  background: var(--text);
-  border: none;
-  color: var(--surface);
-  font-size: 10px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
-  transition: opacity 0.12s;
-}
-
-.cpub-gallery-img-wrap:hover .cpub-gallery-remove {
-  opacity: 1;
-}
-
-.cpub-gallery-remove:hover {
-  background: var(--red);
-}
-
-.cpub-gallery-field {
-  width: 100%;
-  padding: 4px 6px;
-  font-size: 10px;
-  background: var(--surface);
-  border: var(--border-width-default) solid var(--border2);
-  color: var(--text-dim);
-  outline: none;
-  font-style: italic;
-}
-
-.cpub-gallery-field:focus {
-  border-color: var(--accent);
-  font-style: normal;
-}
-
-.cpub-gallery-field::placeholder {
-  color: var(--text-faint);
-}
-
-.cpub-gallery-add {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 24px;
-  border: 2px dashed var(--border2);
-  cursor: pointer;
-  font-size: 12px;
-  color: var(--text-dim);
-  transition: all 0.12s;
-}
-
-.cpub-gallery-add:hover {
-  border-color: var(--accent);
-  background: var(--accent-bg);
-  color: var(--accent);
-}
-
-.cpub-gallery-add i {
-  font-size: 16px;
-}
-
-.cpub-gallery-uploading {
-  pointer-events: none;
-  opacity: 0.7;
-}
-
-.cpub-sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
-</style>

package/components/editors/blocks/HeadingBlock.vue

@@ -1,96 +0,0 @@
-<script setup lang="ts">
-/**
- * Heading block — editable heading with level selector.
- */
-const props = defineProps<{
-  content: Record<string, unknown>;
-}>();
-
-const emit = defineEmits<{
-  update: [content: Record<string, unknown>];
-}>();
-
-const level = computed(() => (props.content.level as number) ?? 2);
-const text = computed(() => (props.content.text as string) ?? '');
-const headingEl = ref<HTMLElement | null>(null);
-
-function onTextInput(event: Event): void {
-  const el = event.target as HTMLElement;
-  emit('update', { text: el.textContent ?? '', level: level.value });
-}
-
-function cycleLevel(): void {
-  const next = level.value >= 4 ? 2 : level.value + 1;
-  emit('update', { text: text.value, level: next });
-}
-
-// Set initial text without v-text (which fights with contenteditable)
-onMounted(() => {
-  if (headingEl.value && text.value) {
-    headingEl.value.textContent = text.value;
-  }
-});
-</script>
-
-<template>
-  <div class="cpub-heading-block">
-    <button class="cpub-heading-level" title="Change heading level" aria-label="Change heading level" @click="cycleLevel">
-      H{{ level }}
-    </button>
-    <div
-      ref="headingEl"
-      class="cpub-heading-text"
-      :class="`cpub-heading-text--h${level}`"
-      contenteditable="true"
-      :data-placeholder="`Heading ${level}`"
-      @input="onTextInput"
-    />
-  </div>
-</template>
-
-<style scoped>
-.cpub-heading-block {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-}
-
-.cpub-heading-level {
-  font-family: var(--font-mono);
-  font-size: 10px;
-  font-weight: 700;
-  color: var(--text-faint);
-  background: var(--surface2);
-  border: var(--border-width-default) solid var(--border2);
-  padding: 2px 6px;
-  cursor: pointer;
-  flex-shrink: 0;
-  margin-top: 4px;
-  transition: all 0.1s;
-}
-
-.cpub-heading-level:hover {
-  border-color: var(--accent);
-  color: var(--accent);
-  background: var(--accent-bg);
-}
-
-.cpub-heading-text {
-  flex: 1;
-  font-weight: 700;
-  outline: none;
-  min-height: 1.2em;
-  line-height: 1.3;
-}
-
-.cpub-heading-text:empty::before {
-  content: attr(data-placeholder);
-  color: var(--text-faint);
-  pointer-events: none;
-}
-
-.cpub-heading-text--h1 { font-size: 28px; }
-.cpub-heading-text--h2 { font-size: 22px; }
-.cpub-heading-text--h3 { font-size: 18px; }
-.cpub-heading-text--h4 { font-size: 15px; }
-</style>

package/components/editors/blocks/ImageBlock.vue

@@ -1,271 +0,0 @@
-<script setup lang="ts">
-/**
- * Image block — upload placeholder or image preview with alt text and caption.
- */
-const props = defineProps<{
-  content: Record<string, unknown>;
-}>();
-
-const emit = defineEmits<{
-  update: [content: Record<string, unknown>];
-}>();
-
-const src = computed(() => (props.content.src as string) ?? '');
-const alt = computed(() => (props.content.alt as string) ?? '');
-const caption = computed(() => (props.content.caption as string) ?? '');
-const hasImage = computed(() => !!src.value);
-
-function updateField(field: string, value: string): void {
-  emit('update', { ...props.content, [field]: value });
-}
-
-const uploading = ref(false);
-const uploadError = ref('');
-
-async function handleFileSelect(event: Event): Promise<void> {
-  const input = event.target as HTMLInputElement;
-  const file = input.files?.[0];
-  if (!file) return;
-
-  uploading.value = true;
-  uploadError.value = '';
-
-  try {
-    const formData = new FormData();
-    formData.append('file', file);
-    formData.append('purpose', 'content');
-
-    const result = await $fetch<{ url: string; width: number | null; height: number | null }>('/api/files/upload', {
-      method: 'POST',
-      body: formData,
-    });
-
-    emit('update', {
-      src: result.url,
-      alt: alt.value || file.name.replace(/\.[^.]+$/, ''),
-      caption: caption.value,
-    });
-  } catch (err: unknown) {
-    uploadError.value = (err as { data?: { statusMessage?: string } })?.data?.statusMessage ?? 'Upload failed';
-  } finally {
-    uploading.value = false;
-  }
-}
-</script>
-
-<template>
-  <div class="cpub-image-block">
-    <!-- No image — upload placeholder -->
-    <template v-if="!hasImage">
-      <label class="cpub-image-placeholder" :class="{ 'cpub-image-uploading': uploading }">
-        <input type="file" accept="image/*" class="cpub-sr-only" :disabled="uploading" @change="handleFileSelect" />
-        <template v-if="uploading">
-          <i class="fa-solid fa-circle-notch fa-spin cpub-image-placeholder-icon"></i>
-          <span class="cpub-image-placeholder-text">Uploading...</span>
-        </template>
-        <template v-else>
-          <i class="fa-regular fa-image cpub-image-placeholder-icon"></i>
-          <span class="cpub-image-placeholder-text">Click to upload image or drag and drop</span>
-          <span class="cpub-image-placeholder-hint">JPG, PNG, WebP, GIF · 10 MB max</span>
-        </template>
-      </label>
-      <div v-if="uploadError" class="cpub-image-error">{{ uploadError }}</div>
-      <div class="cpub-image-url-row">
-        <input
-          class="cpub-image-url-input"
-          type="url"
-          placeholder="Or paste image URL..."
-          :value="src"
-          @input="updateField('src', ($event.target as HTMLInputElement).value)"
-        />
-      </div>
-    </template>
-
-    <!-- Has image — show preview -->
-    <template v-else>
-      <div class="cpub-image-preview">
-        <img :src="src" :alt="alt" class="cpub-image-preview-img" />
-        <button class="cpub-image-remove" title="Remove image" @click="updateField('src', '')">
-          <i class="fa-solid fa-xmark"></i>
-        </button>
-      </div>
-      <div class="cpub-image-fields">
-        <input
-          class="cpub-image-field"
-          type="text"
-          :value="alt"
-          placeholder="Alt text (describes the image)..."
-          aria-label="Image alt text"
-          @input="updateField('alt', ($event.target as HTMLInputElement).value)"
-        />
-        <input
-          class="cpub-image-field"
-          type="text"
-          :value="caption"
-          placeholder="Caption (optional)..."
-          aria-label="Image caption"
-          @input="updateField('caption', ($event.target as HTMLInputElement).value)"
-        />
-      </div>
-    </template>
-  </div>
-</template>
-
-<style scoped>
-.cpub-image-block {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
-
-.cpub-image-placeholder {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 36px 24px;
-  border: 2px dashed var(--border2);
-  background: var(--surface2);
-  cursor: pointer;
-  transition: all 0.12s;
-}
-
-.cpub-image-placeholder:hover {
-  border-color: var(--accent);
-  background: var(--accent-bg);
-}
-
-.cpub-image-placeholder-icon {
-  font-size: 28px;
-  color: var(--text-faint);
-}
-
-.cpub-image-placeholder:hover .cpub-image-placeholder-icon {
-  color: var(--accent);
-}
-
-.cpub-image-placeholder-text {
-  font-size: 12px;
-  color: var(--text-dim);
-}
-
-.cpub-image-placeholder-hint {
-  font-family: var(--font-mono);
-  font-size: 10px;
-  color: var(--text-faint);
-}
-
-.cpub-image-uploading {
-  pointer-events: none;
-  opacity: 0.7;
-}
-
-.cpub-image-error {
-  padding: 6px 10px;
-  font-size: 11px;
-  color: var(--red);
-  background: var(--red-bg);
-  border: var(--border-width-default) solid var(--red-border);
-}
-
-.cpub-image-url-row {
-  padding: 8px 0 0;
-}
-
-.cpub-image-url-input {
-  width: 100%;
-  padding: 6px 10px;
-  font-size: 12px;
-  background: var(--surface);
-  border: var(--border-width-default) solid var(--border);
-  color: var(--text);
-  outline: none;
-}
-
-.cpub-image-url-input:focus {
-  border-color: var(--accent);
-}
-
-.cpub-image-url-input::placeholder {
-  color: var(--text-faint);
-}
-
-.cpub-image-preview {
-  position: relative;
-}
-
-.cpub-image-preview-img {
-  width: 100%;
-  max-height: 500px;
-  object-fit: contain;
-  display: block;
-  background: var(--surface2);
-  border: var(--border-width-default) solid var(--border);
-}
-
-.cpub-image-remove {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  width: 28px;
-  height: 28px;
-  background: var(--text);
-  border: none;
-  color: var(--surface);
-  font-size: 12px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
-  transition: opacity 0.12s;
-}
-
-.cpub-image-preview:hover .cpub-image-remove {
-  opacity: 1;
-}
-
-.cpub-image-remove:hover {
-  background: var(--red);
-}
-
-.cpub-image-fields {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding-top: 6px;
-}
-
-.cpub-image-field {
-  width: 100%;
-  padding: 5px 8px;
-  font-size: 11px;
-  background: var(--surface);
-  border: var(--border-width-default) solid var(--border2);
-  color: var(--text-dim);
-  outline: none;
-  font-style: italic;
-}
-
-.cpub-image-field:focus {
-  border-color: var(--accent);
-  color: var(--text);
-  font-style: normal;
-}
-
-.cpub-image-field::placeholder {
-  color: var(--text-faint);
-  font-style: italic;
-}
-
-.cpub-sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
-</style>